Question

TL; DR;

setInterval(doit,10);
function doit(if(q<10){q++;do_something().onFinished(q--)})

如果同时运行多次，

会有不一致的问题。

我想尽快加载数千张图片（缩略图）。

我已尝试使用jQuery .load，在加载一张图片时加载下一张图片，但速度慢下来并使浏览器崩溃。

replace image src many times gets slow

我目前的尝试如下：

我已经预装了400张id为img_0到img_399
我想一次加载30张图片

-

var q = 0    //queue length
var n = 0    //Image number

$("document").ready(function() {
    cnt=setInterval(loadimg,10); // every 10ms
})

function loadimg() {
if (q < 30) { // if less than 30 images being loaded
    m=++n;    
    q++; // increase queue length
    i = m % 400;
    $("#cnt").html(m)
    $("#queue").html(q)
    $("#img_" + i).attr('src', '//media.paradiss.dk/' + m + '').load(function() {
        q-- //decrease queue length when done.
    })
    } else {
       console.log("busy q:"+q);
    }
}

我的想法是：

setInterval每10ms触发一次loadimg。如果队列长度（q）小于30，则loadimg会增加队列长度计数器，加载图像，并且在加载图像时，队列长度会减少。

但是当q从未超过指定的30时，突然它降到0以下。如果不受限制，它可以减去数千。

是q ++和q--不是原子？

Answer 1

这与操作的原子无关。实际上，JS从不并行执行，没有数据竞争。所有异步事件都在队列中按顺序处理，其中每个调用都是运行完成。

但q突然降到0以下。如果不受限制，它可以减去数千。

这是您加载400多张图片的时候。每次加载新的src时，您都会附加一个新的load回调，但是您永远不会删除它们。在加载400张图片后，img元素将附加多个事件处理程序，并在图片加载时多次减少q。

是n ++ / n-- atomic，（由setinterval多次运行相同的函数）

1 个答案: