javascript - 延迟 JavaScript 的函数执行

Question

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

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

function showDetails(dataitem)
{
...
}

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

score 10 · Accepted Answer

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

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

score 2 · Accepted Answer

您在 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是普通的全局数组，将处理一个项目，然后才延迟调用下一个项目。

score 2 · Accepted Answer

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

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

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

如何使用队列的示例。

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>');
}

score 0 · Accepted Answer

只是不要使用$.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

javascript - 延迟 JavaScript 的函数执行

4 回答 4

Related

Reference