Question

我想在循环执行时显示加载gif。当循环结束时隐藏它。循环持续几秒钟。

$("#loading").removeClass('hidden');
        for (var i = 0; i < 10; i++)
        {
            clearInfo(i);
            loadInfo(i, getInfo());
        }
$("#loading").addClass('hidden');

这不起作用。我想最后一个addClass是在removeClass之后执行的，并且没有等待循环...

应该采用一种方法，将循环插入带回调的函数中，但是没有更简单的方法吗？

此致

Answer 1

JavaScript在单个线程中运行。通过复杂的同步计算来阻止这个线程并不是一个好主意。结帐WebWorkers。

如果loadInfo是异步操作，您可以使用这样的承诺：

// show your loading indicator

var promises = [];
for (var i = 0; i < 10; i++) {
    clearInfo(i);

    // loadInfo returns promise
    promises.push(loadInfo(i, getInfo()));
}
Q.all(promises)
  .then(function () {
    // hide your loading indicator
  });

回调解决方案将是一个混乱和肮脏（根据我个人的意见）。

Answer 2

我可能会按照以下方式做点什么：

$("#loading").removeClass('hidden');
for (var i = 0; i < 10; i++) {
    clearInfo(i);
    loadInfo(i, getInfo());
    if ( i == 9 ) {
        // this is the final pass through the loop
        $("#loading").addClass('hidden');
    }
}

当循环结束时，Javascript执行操作

2 个答案: