隔一秒钟读取一个数组的一个值

Question

例如[1,2,3] 第1秒钟打印1，第2秒钟打印2，第3秒钟3...

我是这样写的：

js  function foo(arr) {
    if(Object.prototype.toString.call(arr).slice(8,-1) !== "Array") return;
    var length = arr.length;
    var i = 0;
    return function(){
      if(i<length) console.log(arr[i++]);
    }
  }

  setInterval(foo([1,2,3]),1000);

有没有更好点的写法，请教了，谢谢。 =.=

Answer 1

(function(arr){
    var i=0,length=arr.length;
    (function a(){
        setTimeout(function(){
            console.log(arr[i++]);
            i<length&&a();
        },1000)
    }())
}([1,2,3,4]))

应该是最省的写法了吧，也没用for，也没有全局变量。相对于调用Array的方法移除数组项目，使用index直接读取值性能会高一点

Answer 2

原来的写法有什么不好的?
能够保证每隔1秒触发一次,但不能保证按希望的时间点执行

Answer 3

偷师学艺，借鉴排名第一的答案，如果用setTimeout()实现可以这样写：

javascript(function(arr){
    var i=0; length=arr.length;
    (function a(){
        setTimeout(function(){
            if(i<length)
            console.log(arr[i++]);
            a();
        },1000);
    }())
}([9,6,4,7,'r','t']));

如果是用setInterval()实现可以这样写：

javascript(function(arr){
    var i=0; length = arr.length;

    (function(){
        setInterval(function(){
            if(i<length)
            console.log(arr[i++]);
        },1000);
    }())
}([9,6,4,7,'r','t']));

基本上思路差不多，我也是个小白，匿名函数自执行也是最近学习了一点，我这里写一下我的分解思路，就当做是小白的一个读书笔记吧：

首先，一开始先想到遍历数组挨个打印，于是就是这样：

javascriptvar arr = [9,6,4,7,'r','t'];

for(var i=0; i<arr.length; i++){
    console.log(arr[i]);
}

其次再在这个基础上想到匿名函数自执行把arr作为形参，具体数组作为实参，于是就是下面这样：

javascript(function(arr){
    var i=0; length = arr.length;
    for(i; i<length; i++){
        console.log(arr[i]);
    }
}([9,6,4,7,'r','t']));

最后想到用匿名函数自执行并使用setInterval()实现每一秒挨个打印：

javascript(function(arr){
    var i=0; length = arr.length;
    (function(){
        setInterval(function(){
            if(i<length)
            console.log(arr[i++]);
        },1000);
    }())
}([9,6,4,7,'r','t']));

再在这个基础上参(fu)考(zhi)排名第一的答案用setTimeout()实现此效果：

javascript(function(arr){
    var i=0; length=arr.length;
    (function a(){
        setTimeout(function(){
            if(i<length)
            console.log(arr[i++]);
            a();
        },1000);
    }(i))
}([9,6,4,7,'r','t']));

感谢楼上各位大牛的答案，菜鸟我受教了。

Answer 4

var array = [1, 2, 3, 4, 5]
var i = 0;
var interval = setInterval(function () {
    if (i >= array.length) {
        clearInterval(interval);
        return;
    }

    console.log(array[i]);
    i = i + 1;
}, 1000);

Answer 5

var i =1;
for(i; i<3; i++){
    (function(num){
     setTimeout(function(){
         console.log(num);
         }, num*1000);
     })(i);
}


上面的只想说，能不能用setTimeou替代setInterval

Answer 6

javascriptfunction print(array){
    var tmp = array.slice();
    var interval = setInterval(function(){
        if (tmp.length>0) {
            console.log( tmp.shift() );
        }else{
            clearInterval(interval);
        }
    },1000);
}

这种怎么样 ？

Answer 7

个人觉得这样很清晰~

    function test(arr) {
        var i = 0;
        var length = arr.length;
        var flag = setInterval(function(){
            console.log(arr[i++]);
            if(i >= length)
                clearInterval(flag);
        },1000);
    }
    test([1,2,3,4]);

Answer 8

我觉得这种好，不需要循环，利用 Array自带的函数，效率也好。

(function print(array){
      var tmp = array.slice();
      var getFrist = setInterval(function(){
          if (tmp[0]) {
              console.log( tmp.shift() );
          }else{
              clearInterval(getFrist);
          }
      },1000);
  })([1,2,3,4,5])

Answer 9

// 第一种
for (let i of [1, 2, 3]) {
  (j => {
    setTimeout(() => {
      console.log(j);
    }, 1000 * j);
  })(i);
}
// 第二种
const p = i => {
  return new Promise(res => {
    setTimeout(() => {
      res(i);
    }, 1000);
  });
};
void (async () => {
  for (let v of [1, 2, 3]) {
    const res = await p(v);
    console.log(res);
  }

Answer 10

我都不知道说什么了