手机端web网站一个很神奇的bug求助。关于按钮的click事件执行的问题。

首先这个问题是出子在手机端web访问网站上出现的，电脑上用谷歌访问就没有这个问题。

问题是这样的
我现在有两个方法

        function test2()
        {
            DoKoutu();
            test();
        }

然后我把这几个方法绑定到几个按钮上

 <button id="koutubtn" class="buttonblue" style="width: 300px; height: 120px" onclick="DoKoutu();">抠图完成</button>
 <button id ="kakaka" class="buttonred" style="width: 300px; height: 120px" onclick="test();">保存111</button>
<button id ="kakaka2" class="buttonred" style="width: 300px; height: 120px" onclick="test2();">保存222</button>

我的问题是这样的
当我分别点 抠图完成和保存111两个按钮的时候
按理说 就执行了DoKoutu()的方法和test()的方法。执行的结果是我想要的

但是我只点击保存222这个按钮的时候，按理说不就是一起执行了DoKoutu（）和test()的方法么，结果执行的结果就不是我想要的，

这是为什么呢？？求助

ps:
我的函数主题有绑定一些事件的代码，是跟这块有关系么??

document.getElementById("canvasmovediv").addEventListener(STA_EN, start, false);
document.getElementById("canvasmovediv").addEventListener(MV_EV, move, false);
document.getElementById("canvasmovediv").addEventListener(END_EV, end, false);
document.getElementById("canvasmovediv").addEventListener(END_EV, end, false);

ps2:主要用了canvas里面的一些东西。上面的move，start什么的是变量，有定义的。

function DoKoutu() {
            IsKouTuOk = true;
            a.fillBackColor();
            a.CreateClipArea();
            //重建个画布，用透明的颜色把取到的点重新截取一遍图,就没有蓝线了，目的是没有蓝线

            //document.getElementById("canvasDiv1").style.display = "none";
            //这一段要是智能成图的话就不用执行了
            if (!IsAutoKouTu) {
                document.getElementById("img3").src = document.getElementById("img1").src;
                $("#img1").attr("src", $("#canvas")[0].toDataURL("image/png"));

                var b = document.getElementById("canvas2").getContext("2d");
                var bobject = document.getElementById("canvas2");
                b.beginPath();
                for (var i = 0; i < a.can.pointList.length; i++) {
                    b.lineTo(a.can.pointList[i].pointx, a.can.pointList[i].pointy);
                }
                b.closePath();
                b.clip();
                _("img3").style.width = _("img1").style.width;
                _("img3").style.height = _("img1").style.height;
                var image = document.getElementById("img3");
                //drawImage的没问题
                b.drawImage(image, 0, 0, _("img1").style.width.replace("px", ""), _("img1").style.height.replace("px", ""));
            }
            else {
                var b = document.getElementById("canvas2").getContext("2d");
                var bobject = document.getElementById("canvas2");
                var image = document.getElementById("img1");
                $("#img5").attr("src", _("img1").src);
                b.drawImage(image, 0, 0, parseInt(_("img1").style.width.replace("px", "")), parseInt(_("img1").style.height.replace("px", "")));
            }
            //两个画布隐藏或者显示一下,截图用的画布隐藏，显示用的画布显示
             document.getElementById("canvasdrowDiv").style.display = "none";
             document.getElementById("canvasmovediv").style.display = "";

            //放到一个隐藏的img上 再让这个img写回来（前清空)
            //把全图画在另一张行的div上
            //如果是自动抠图的话,直接image1的画上去,image1为智能抠图完成之后的结果
            $("#img4").attr("src", $("#canvas2")[0].toDataURL("image/png"));
            var imagetemp = document.getElementById("img4");
            //  var imageback = document.getElementById("img2");
            document.getElementById("canvasmovediv").addEventListener(STA_EN, start, false);
            document.getElementById("canvasmovediv").addEventListener(MV_EV, move, false);
            document.getElementById("canvasmovediv").addEventListener(END_EV, end, false);
            document.getElementById("canvasmovediv").addEventListener(END_EV, end, false);
            SuoFangbeishu = 1; //滚轮缩放倍数初始为1
            _("canvasmovediv").onmousewheel = scrollFnc;

            //test();
            return true;
        }

    function test() {
        var imagetemp = document.getElementById("img4");
        c = _("canvas3");
        ctx = c.getContext("2d");
        ctx.drawImage(imagetemp, 0, 0, 940, 800);
        ctxW = c.width;
        ctxH = c.height;
        imgW = 940 || img.width;
        imgH = 800 || img.height;
        ctx.translate(imgW / 2, imgH / 2);
        //onDraw();
        ctx.save();
        //选的背景图片替换div的背景图片
        document.getElementById("canvasmovediv").style.backgroundImage = "url(" + document.getElementById("img2").src + ")";
        //抠图完成的按钮变为无法使用
        _("koutubtn").disabled = "disabled";
        _("koutubtn").className = "buttonblue disabledblue";
        _("autokoutubtn").disabled = "disabled";
        _("autokoutubtn").className = "buttongreen disabledgreen";
        onDraw();
        return true;
    }

下面两个方法的代码没仔细看，不过我想你认为结果不对，应该是两个方法中有公用的变量或者后面的方法用到了前面方法的结果吧。分别点击执行这两个方法是有顺序的，第二个方法执行的时候，第一个方法已经执行完了。
test2这样就等于让两个方法一起执行，就可能出现不同结果。你可以用settimeout延迟执行第二个方法来检查下

你可以把这两个方法贴一下 DoKoutu(); test();

方法内容，期望的实现效果，出现的不期望的效果，得写一下

$("#img4").attr("src", $("#canvas2")[0].toDataURL("image/png"));
这是一个异步过程，在图像被显示出来前，就往下执行了。
到test()那块的时候，如果图像还没显示完，就不对了。

所以，当你分开执行的时候，中间需要点击按钮，这个过程中图像已经显示完了，结果正确。
而连续执行的时候，图像正在显示，所以就错了。

正确的做法应该是更改src之后要捕捉onload事件，在事件处理方法里去执行test()