js-循环执行一个函数

琉璃映雪照幽月

js-循环执行一个函数

js里的两个内置函数：setInterval()与setTimeout()提供了定时的功能，前者是每隔几秒执行一次，后者是延迟一段时间执行一次。javascript 是一个单线程环境，定时并不是很准，遇到阻塞的操作会延迟，代码：

1. <script>
   
2. var fn = function(){
   
3.         alert("fn()函数被执行了");
   
4.     }
   
5.      
   
6.     setInterval(fn,1000);
   
7. </script>

复制代码

以上代码会每隔一分钟弹窗，如果不关闭弹窗。Js不会在下一秒执行这个函数。也就说，被阻塞了。

除了setInterval()实现函数重复执行外，还可以用setTimeout()实现函数重复执行。是这么做的：

1. <script>
   
2.     var fn = function(){
   
3.         alert("fn()函数被执行了");
   
4.         setTimeout(fn, 1000)
   
5.     }
   
6.      
   
7.     fn();
   
8. </script>

复制代码

代码中用setTimeout()调用自身。这样函数执行一次，会一直延迟一段时间调用自身，实现了函数重复执行，是不是觉得很妙？看过许多网页上用到的jquery倒计时插件，都是用setTimeout()来重复执行函数。

setTimeout()执行顺序有个坑，看下面的代码，你觉得控制台输出的结果是什么：

1. <script>
   
2. setTimeout(function() {
   
3.         console.log(1);
   
4. }, 0);
   
5. console.log(2);
   
6. </script>

复制代码

答案是先输出2，再输出1。这跟我们的直觉是不一致的。当事件队列为空的时候，才执行SetTimeout()里面的代码。