延迟 JavaScript 函数执行答案

【问题标题】：Delay JavaScript's function execution延迟 JavaScript 函数执行
【发布时间】：2011-03-20 22:50:53
【问题描述】：

我有一个 JQuery 的 .each 循环，每次迭代调用一个带有参数的函数，有没有办法延迟这个函数调用？我已经尝试过setTimeout，如下所示，但这不起作用，因为该函数会立即执行。

$.each(myArray, function (j, dataitem)
{
     setTimeout(function () { showDetails(dataitem) }, 300);
});

function showDetails(dataitem)
{
...
}

数组大小大约为 20，我想要做的是在某个时间范围内而不是立即分发函数调用，知道如何实现这一点吗？我准备重写和重组如何调用函数来完成这项工作，任何帮助将不胜感激。

【问题讨论】：

执行肯定被推迟了。但循环不是，即所有 20 个setTimouts 或多或少都被一次调用。您要一个接一个地调用showDetail 函数吗？我的意思是，第一个在 300 毫秒之后，第二个在 600 毫秒之后，等等。

标签： javascript jquery settimeout jquery-events delayed-execution

【解决方案1】：

您可以使用数组的索引来动态计算间隔：

$.each(myArray, function (j, dataitem) {
    window.setTimeout(function () { 
        showDetails(dataitem) 
    }, (j + 1) * 300);
});

【讨论】：

现在我重新阅读了这个问题，这听起来像是提问者想要做的。 +1
真的需要window. 前缀吗？我认为没有人会掩盖setTimeout 的名字。
@Šime Vidas，我更喜欢始终使用适当的范围。这只是一个好习惯。
您是否对window 对象的所有属性都这样做（如window.parseInt、window.console.log、window.document.getElementById 等）？

【解决方案2】：

您在 300 毫秒后全部执行它们。相反，尝试这样的事情：

window.setTimeout(function () { showDetails(dataitem) }, (j + 1) * 300);

编辑：与其一次创建 20 个计时器，我认为最好一个一个地完成。功能应该是：

function showDetails(index)
{
   if (index >= myArray.length)
      return false;
   var dataItem = myArray[index];
   //code here......
   //code here......
   //code here......
   windows.setTimeout(function() { showDetails(index + 1); }, 300);
}

第一次调用可以是：

$(document).ready(function() {
{
   showDetails(0);
});

这假设 myArray 是普通的全局数组，将处理一个项目，然后才延迟调用下一个项目。

【讨论】：

谢谢，我已经尝试过了，它有效，但我选择了第一个答案，因为它更容易阅读代码。 +1 :)

【解决方案3】：

看看 jQuery.queue([ queueName ], callback( next ))。这允许您将要调用的函数排队，这是 jQuery 的动画效果在内部使用的。

听起来您想实现一个队列，尽管您这样做的意图并不完全清楚。

编辑：重新阅读您的问题，我认为其他答案更符合您的要求，但是我想我会向您展示如何使用自定义队列实现延迟函数执行的示例.

一个example of how you could use a queue。

var myArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
    output = $('#output');

// set the queue up
$.each(myArray, function (j, dataitem) {
    output.queue('queue', function(next) {
        var that = this;
        showDetails(dataitem);  
        window.setTimeout(next,300);
    });
});

// start the queue running.
output.dequeue('queue');

function showDetails(dataitem) {
    output.append('<div>' + dataitem + '</div>');
}

【讨论】：

这实际上很有用。 +1 :)

【解决方案4】：

只是不要使用$.each，而是类似：

var data = [1, 2, 3, 4, 5];

function showDetails(values, delay) {
  console.log(values.shift()); //show the value
  if (values.length) {
    setTimeout(function() {showDetails(values, delay); }, delay); //schedule next elem
  }
}

showDetails(data.slice(0), 300); //dont forget the slice, call-by-reference

【讨论】：