Javascript中的自旋锁

Question

我如何在javascript中做一个自旋锁？

我正在尝试加载一堆图像，只有在加载完所有内容后才能继续前进，所以我有一个像这样的自旋锁

for(...)
   image[i].onload = function() { ++imagesloaded; }

while(imagesloaded != totalimages)
{
}

它会让我的浏览器崩溃。有没有更好的方法呢？或者是我遗漏的让出/休眠功能？

Answer 1

简短的回答是:不要自旋。

更长的答案:以下是如何做到这一点：

var imagesLoaded = 0;
var totalImages = 42;

function handleImageLoad()
{
    imagesLoaded++;
    if (imagesLoaded === totalImages)
    {
        doSomething();
    }
}

for (var i=0; i<totalImages; i++)
{
    image[i].onload = handleImageLoad;
}

通常，当您想要在JavaScript中休眠/等待/旋转时，可以考虑从回调(和setTimeout/setInterval)的角度来解决问题。

Answer 2

上面的答案没有用，因为浏览器中的限制/bug可能需要自旋锁。例如，当你想用javascript生成一个文件时，safari (希望不是将来的版本)需要使用window.open方法。这样做的结果是您不能使用任何回调(因为有弹出窗口阻止程序)来生成文件，这实际上会强制使用首先调用文件生成函数(使用回调)的对话框窗口，然后再使用下载文件的按钮。由于自旋锁不起作用，代码如下所示：

function process(callback) {
  processCallbackData = null; // global var that must be a unique name
  callback(function(data) {
     processCallbackData = data;
  });
}

function fowardButton() {
  if(processCallbackData!=null) {
     goForwardUsingCallbackIncompatibleCode();
  } else {
     displayStillLoadingWarning();
  }
}

Answer 3

不要使用循环来检查。签入事件处理函数。(因此，您只在图像加载时进行检查，而不是连续且尽可能快地进行检查)