Question

var items = [ 
  ["crunches", 30], 
  ["crunches", 45], 
  ["squats", 30], 
  ["squats", 45], 
  ["lunges", 30],
  ["lunges", 45], 
  ["wall sits", 30],
  ["wall sits", 45], 
  ["push ups", 30],
  ["push ups", 45], 
  ["leg ups", 30],
  ["leg ups", 45], 
  ["jumping jacks", 30],
  ["jumping jacks", 45], 
  ["sumo squat", 30],
  ["sumo squat", 45] 
];

我正在遍历这个数组，每次都删除一个元素，但我想从每个项目中获取数字值，并使该函数外的setInterval延迟。这甚至可能吗？

为可怜的JS道歉，还在这里学习一下。

演示：https://jsfiddle.net/mattbtay/dcqdf8ng/1/

Answer 1

我想你知道，setInterval()在迭代之间有一个恒定的持续时间，所以如果你想在每次迭代之间有不同的延迟，那么每次使用重复的setTimeout()调用更有意义。 setTimeout()的下一个延迟是从前一个选择中专门设置的。这将创建相当于定期计时器，但具有不同的间隔。

以下是关于如何做到这一点的一般概念。基于你的jsFiddle，看起来你想每次从数组中随机选择一个项目，这就是我展示实现的方式。你没有说出单位在时间价值上的含义。我以为它们是几秒钟。

function processArray(arr, processItem, done) {
    // make copy of initial array so we don't modify original data
    var data = arr.slice();
    function next() {
        if (data.length) {
            // get random index
            var index = Math.floor(Math.random() * data.length);
            var item = data[index];

            // remove the selected item from the array
            data.splice(index, 1);

            // now process the randomly selected item
            processItem(item[0], item[1]);

            // set timer for next item based on the time in this one
            setTimeout(next, item[1] * 1000);
        } else {
            done();
        }
    }
    next();
}

processArray(items, function(activity, time) {
      $('#activity').html(activity + ' ' + time);
}, function() {
      // this is called when all the activities are done
});

Answer 2

以下是从项目中获取随机项目，在html中显示，删除它，等待x毫秒然后重新开始直到没有项目剩余的示例。如果没有剩下，它会从promise中触发.then函数。

var items = [
  ["crunches", 30],
  ["crunches", 45],
  ["squats", 30],
  ["squats", 45],
  ["lunges", 30],
  ["lunges", 45],
  ["wall sits", 30],
  ["wall sits", 45],
  ["push ups", 30],
  ["push ups", 45],
  ["leg ups", 30],
  ["leg ups", 45],
  ["jumping jacks", 30],
  ["jumping jacks", 45],
  ["sumo squat", 30],
  ["sumo squat", 45]
];


function removeItems(processItemRemoved) {

  return new Promise(function(resolve, reject) {
    function removeItem() {

      if (items.length) { // if there are still items to remove

        var randomIndex = Math.floor(Math.random() * items.length); // pick a random index between 0 and length-1
        var item = items[randomIndex]

        items.splice(randomIndex, 1) // remove from array

        processItemRemoved(item) // process removed item

        setTimeout(removeItem, item[1]) // call function again after items[1] milliseconds
      } else { // if it has finished, run callback function
        resolve()
      }
    }
		removeItem()
  })


}


removeItems(function(item) {
  $("#activity").html(item)
}).then(function(){
		console.log("all items finished")
})

#activity {
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">

      <div class="jumbotron">
        <h1 id="activity"></h1>
        <button class="btn btn-primary" id="startBtn">Begin</button>
      </div>

    </div>
  </div>
</div>

Javascript：将函数的pass number变量传递给setInterval

2 个答案: