为数组中的一个一个数字设置超时 5 秒，但不是一次全部设置

Question

我有一个包含 100 个数字的数组，我想将活动 class 添加到其中的 20 个，那部分没问题并且可以工作。但是我想要每个数字之间的延迟。

我试过设置超时，但它一次只延迟所有数字 5 秒，但我想一个一个地设置活动 class，延迟 5 秒。请帮忙

function numbers() { 
                    
                        var activequantities;
                    activequantities = "@Html.DisplayFor(modelItem => item.Numbers)".split(",");
// this is array with sorted random numbers 20 of 100 example [22,33,46,57,etc]


                    function setClassNextItem(index)
{
    if (index >= activequantities.lenght) return;

    var value = activequantities[index];
    $(`.grid-container div[data-tabid=${value}]`).addClass('active');
    setTimeout(setClassNextItem(++index), 5000);
}

$(".grid-container div").removeClass('active');
                    setTimeout(setClassNextItem(0), 5000);

                        
                        
                }

<div class="grid-container">
        <div class="grid-item">

            <div class="grid-container2">
                <div class="grid-item2" data-tabid="1">1</div>
                <div class="grid-item2" data-tabid="2">2</div>
                <div class="grid-item2" data-tabid="3">3</div>
                <div class="grid-item2" data-tabid="4">4</div>
                </div>

一一添加活动class。每个数字之间有 5 秒的延迟。

Answer 1

尝试将 activequantities 转换为数字数组并执行如下操作：

function setClassNextItem(index)
{
    if (index >= activequantities.lenght) return;

    var value = activequantities[index];
    $(`.grid-container div[data-tabid=${value}]`).addClass('active');
    setTimeout(setClassNextItem(++index), 5000);
}

$(".grid-container div").removeClass('active');
setTimeout(setClassNextItem(0), 5000);

Answer 2

欢迎使用计算器！函数 setTimeout returns 一个将在 x 毫秒内解析的异步 Promise。如果你在循环中运行这个函数，你只需添加更多要解决的承诺，但它们都会在接近同一时间解决。例如：

发送第一个 Promise：它将等待 5 秒
一毫秒后，发送另一个将等待 5 秒的承诺
...
5 秒后，第一个 Promise 正确解析。
1 毫秒后，第二个承诺正确解析
...

此行为使您的所有 promise 几乎同时解析，仅在您初始化它们后 5 秒。

在你的例子中，因为你想以精确的时间间隔执行一个函数，你需要 setInterval。 setInterval 函数也需要一个 MS 时间和一个函数，但它每隔 x 毫秒重复这个函数，或者直到间隔以编程方式停止。例如：

var counting = 0;
var myInterval = setInterval(function() {
    //we do something...
    console.log('loop:' + counting ++);
    if(counting === 10) {
        // we do this 10 times, than we stop the interval
        clearInterval(myInterval);
    }
}, 1000);

这里我使用 1 秒间隔，因为 5 秒对于演示来说太长了。

Answer 3

遍历过滤后的元素数组并添加 (index + 1) * interval 回调超时以添加类名。

for (i = 0; i < 20; i++) {
  setTimeout(
    function (i) {
      //$this.addClass("active");
      console.log(`Add "active" class to element ${i}`);
    },
    (i + 1) * 1000, // shortened to 1 second for demo
    i
  );
}

Answer 4

是迄今为止最好和最简单的。另一种选择是走 async function/promise 路线。

/**
 * Time in milliseconds to wait between setting elements to active.
 */
const delayTime = 500, // shortened to half a second for the example
  $app = $('#app');

/**
 * Whether or not the routine is currently running.
 */
let stopped = true;

/**
 * Returns a promise that resolves after the specified number of milliseconds.
 */
function delay(ms) {
  return new Promise(res => setTimeout(res, ms));
}

function setActiveInSerial() {
  // a little user-friendly UI work
  stopped = !stopped;
  if (stopped) {
    $('#btn').text('Run');
  } else {
    $('#btn').text('Stop');
  }

  // promise that lets us serialize asynchronous functions
  let promise = Promise.resolve();

  $app.children().each(function() {
    promise = promise.then(async() => {
      if (stopped) {
        return;
      }

      $(this).addClass('active');

      // wait for `delayTime` to pass before resolving the promise
      await delay(delayTime);
      
      $(this).removeClass('active');
    })
  });
  
  // mark the routine as stopped and reset the button
  promise.then(() => {
    stopped = true;
    $('#btn').text('Run');
  });
}

// populate with items
for (let i = 1; i <= 20; i++) {
  $app.append($('<span>').text(`Item ${i}`));
}

// attach function to run button
$('#btn').click(setActiveInSerial);

#app {
  display: flex;
  flex-direction: column;
}

#app .active {
  background-color: cyan;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn">Run</button>
<div id="app"></div>

这段代码明显更长，但更灵活，是学习promises和async functions的好习惯。它的额外好处是不需要搜索元素的所有子元素以删除 active class.

为数组中的一个一个数字设置超时 5 秒，但不是一次全部设置

Set time out 5 seconds for one by one number in array, but not for all at once

javascript

loops

settimeout

delay

each