Jquery中的超时更新Dom？

Question

假设我想更改图像源 onClick 并进行一些计算。现在发生的是函数退出时源发生了变化。 （Dom 很忙？）

我怎样才能使图像源立即更新，然后函数继续执行 while 循环？

HTML：

<img src="http://goo.gl/l55G2P" id="ImageSrc">

JS：

$( "#ImageSrc" ).click(function() {

    new_imgsrc="http://goo.gl/wBhyee";

    $("#ImageSrc").attr('src',new_imgsrc);
    test = 0
    do {
        test = test + 1;
        console.log(test);
    } while (test != 50000);
});

Here 是一个 JSFiddle。

Answer 1

不确定我是否理解正确，但您可以使用超时：

setTimeout(function() {
    //while loop here
}, 1000);

1000 表示 1 秒。你可以缩小这个值，这样它就不会等太久。

由于click() 没有对onComplete 的回调，我不确定是否有更好的方法来实现这一点。

Answer 2

这个问题实际上比仅仅设置一个超时有点棘手，如果你想做对的话。

设置超时的问题是超时必须足够大才能加载图像。如果图片没有在超时时间内加载，它仍然需要等待循环。

您实际上需要做的是给它一个在每一步之间更新 DOM 的机会。为此，您需要设置每 0 毫秒触发一次的超时（或间隔，但我更喜欢超时方法，因为您可以更好地控制）（基本上，尽可能快）。但是，由于这些都是超时，它有机会在准备好时更新其中两个之间的 DOM。

console.clear();
$( "#ImageSrc" ).click(function() {
    loading_imgsrc="http://goo.gl/wBhyee";

    $("#ImageSrc").attr('src',loading_imgsrc);
    console.log("changed");
    doTest(0);
});

function doTest(test) {
    test = test + 1;
    console.log(test);

    if (test < 1000) {
        setTimeout((function() { return function() { doTest(test); }})(), 0);
    }
}

JSFiddle：http://jsfiddle.net/E3zvL/4/