时间戳

首页 > 解决方案 > 如何在 JQuery 中为每个循环制作可变延迟/睡眠

javascript - 如何在 JQuery 中为每个循环制作可变延迟/睡眠

问题描述

我见过许多其他人提出与此有关的问题，但没有一个答案真正有效，也不适用于我的情况。

我只是想在我的每个可变时间长度的循环中实现一个延迟。这些可变时间长度来自我在读取 json 文件时循环的数组。为了提供进一步的上下文，目的是在可变的时间内突出显示句子中的每个单词 - 每个单词都有来自 json 文件的相关时间（以毫秒为单位）。

我的假设是该解决方案与 setTimeout 有关，但每次我尝试它最初等待但随后跳过所有其余部分。

我现在的代码：

  $("[id^='timing_check']").click(function() {
    sn = $(this).attr('name');
    ayahnum = $(this).attr('data-id');

    $.getJSON("/static/json/mishary.json", function(result) {
      $.each(result, function(i, v) {
        if (v.ayah == ayahnum && v.surah == sn) {
          var x = v.segments;
          var i = 1;

          x.forEach(function(item) {
            time_sleep = item[3];
            wordref = sn + ':' + ayahnum + ':' + i;
            i++;

            setTimeout(function() {
              $("[name='" + wordref + "']").css('color', 'red');
            }, time_sleep);
          });
        }
      });
    });
  });
});

这根本行不通。差远了。请提供一些指导

标签： javascriptjqueryforeachsettimeout

解决方案

我认为问题如下，让我们假设这段代码：

array1 = [1000, 2000, 1000, 4000, 10000];
array1.forEach(function(item) { //all actions start at 0

        setTimeout(function() {
            console.log("some action of item "+item);
        }, item);

    }

);

所有setTimeout函数都是从0+item time 开始计算的，所以时间 1000 和 1000 将同时执行。也许您想计算item[i1]+item[i2]之类的时间，那么您必须将每次迭代中花费的所有时间相加。这种方式的代码将类似于：

array1 = [1000, 2000, 1000, 4000, 10000];

var abs = 0;//beginning 

array1.forEach(function(item) {

        if(!abs){
            abs = item;
        }else{
            abs += item;//sum time spent
        }
        console.log("set "+abs+" to setTimeout");

        setTimeout(function() {
            console.log("some action of item "+item);
        }, +abs);

    }

);

在本例中，第 2 个 1000 将在 1000 和 2000 之后计算，即循环触发后 4000 毫秒。

推荐阅读