如何使用闭包通过 SetInterval 记录数组中的所有值？答案

【问题标题】：How can i use a closure to log all values in the array with a SetInterval?如何使用闭包通过 SetInterval 记录数组中的所有值？
【发布时间】：2017-07-04 03:44:47
【问题描述】：

function displayValues(values) {
    for (var i = 0; i < values.length; i++) {     
       setInterval(function() {
          console.log('The item ' + i + ' has value ' + values[i]) //Currently only logs length of array
      }, 500)
    }
}
var array = ['a', 'b', 'c', 'd'];
displayValues(array)

我将 SetInterval 封装在一个函数中，该函数当前记录索引 0 和值 a，但我永远无法获得其余的值。下面是我的代码。我接近了吗？

function display(values) {

  function getVal(){
    return setInterval(function() {
          console.log('The item ' + i + ' has value ' + values[i])
      }, 500)
  }
    for (var i = 0; i < values.length; i++) {     
       return getVal()
    }
}

【问题讨论】：

function getVal(i){ 和 return getVal(i) ... 哦，并删除调用 getVal 的行中的 return - 因为这将在一次迭代后终止您的函数
或者，对于现代浏览器...在您的第一个代码块中将 var i 更改为 let i
您不应该使用setTimeout() 而不是setInterval() 吗？使用 setInterval() 将继续永久记录，而不是每个元素一次。

标签： javascript for-loop closures

【解决方案1】：

这样您可以循环，var 在 setInterval 函数之外声明，并且在 500 毫秒内完成循环开始完成而不是等待（异步行为）。所以它总是以i 作为数组的长度，即i++ 直到i < value.length

function displayValues(values) {
  for (var i = 0; i < values.length; i++) {
    (function(j) {
      setInterval(function() {
        console.log('The item ' + j + ' has value ' + values[j]);
      }, 500);
    })(i);
  }
}
var array = ['a', 'b', 'c', 'd'];
displayValues(array)

让我们采用封装的方式

function display(values) {
  function getVal(j) {
    setInterval(function() {
      console.log('The item ' + j + ' has value ' + values[j]);
    }, 500);
  }
  for (var i = 0; i < values.length; i++) {
    getVal(i);
  }
}

var arr = ['a', 'b', 'c', 'd'];
display(arr);

以上两者都是一样的。第二个 sn-p 表示有一个名为 getVal 的外部函数，而在第一个 sn-p 中它只是一个匿名函数。

【讨论】：