vue循环for里使用延时

原创已于 2022-06-30 17:44:16 修改 · 4.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-06-30 17:38:26 首次发布

前端专栏收录该内容

7 篇文章

订阅专栏

本文探讨了JavaScript中常见的异步问题，如forEach方法在处理延迟操作时可能导致的失效情况，并提供了有效的解决方案，包括使用setTimeout的指数延迟和async/await的等待。同时，还介绍了传统的闭包技巧来保持变量作用域，确保每个回调函数能正确访问到对应的列表项。

一、次方法失效

list.forEach(obj=>{
        setTimeout(()=>{
          console.log(obj)
        },1000)
})

二、有效的方法

list.forEach((obj,index)=>{
        setTimeout(()=>{
          console.log(obj)
        },1000*index)
})

三、其次还可以使用睡眠

 // 睡眠1秒   n=1000
    async sleep(n) {
      var start = new Date().getTime();
      while (true) {
        if (new Date().getTime() - start > n) {
          break;
        }
      }
    },

四、js的的使用

for(let i=0;i<list.length;i++){
        (function (a) {
          setTimeout(() => {
            console.log(list[a]);
          }, 1000 * i);
        })(i)
      }