定时器

js中两种定时器的设置及清除

1.循环执行：

var timeid = window.setInterval（“方法名或方法”，“延时”）;

window.clearInterval(timeid);

<script type="text/javascript">
  $(document).ready(function(){
    //循环执行，每隔1秒钟执行一次 1000 
    var t1=window.setInterval(refreshCount, 1000);

    function refreshCount() {
      console.log("ready");
    }

    //去掉定时器的方法  
    window.clearInterval(t1);   
 }); 
</script>

setInterval有一个有名函数fn1,setInterval(fn1,500)与setInterval(fn1(),500)有什么区别？
第一个是重复执行每500毫秒执行一次，后面一个只执行一次。

2.定时执行：当方法执行完成定时器停止(但是定时器还在,只不过没用了);

var tmid = window.setTimeout(“方法名或方法”, “延时”);

window.clearTimeout(tmid);

<script type="text/javascript">
  $(document).ready(function(){
    //定时执行，5秒后执行
    var t1=window.setTimeout(refreshCount, 1000 * 5);
    function refreshCount() {
      console.log("ready");
    }
    //去掉定时器的方法  
    window.clearTimeout(t1);   
 }); 
</script>

例题：

for(var i=0;i<=3;i++){ setTimeout(function() { console.log(i) }, 10);}

答案：打印4次4

这道题涉及了异步、作用域、闭包

settimeout是异步执行，10ms后往任务队列里面添加一个任务，只有主线上的全部执行完，才会执行任务队列里的任务，当主线执行完成后，i是4，所以此时再去执行任务队列里的任务时，i全部是4了。对于打印4次是：

每一次for循环的时候，settimeout都执行一次，但是里面的函数没有被执行，而是被放到了任务队列里面，等待执行，for循环了4次，就放了4次，当主线程执行完成后，才进入任务队列里面执行。

　　（注意：for循环从开始到结束的过程，需要维持几微秒或几毫秒。)

当我把var 变成let 时

for(let i=0;i<=3;i++){ setTimeout(function() { console.log(i) }, 10);}

打印出的是：0,1,2,3

当解决变量作用域，

因为for循环头部的let不仅将i绑定到for循环快中，事实上它将其重新绑定到循环体的每一次迭代中，确保上一次迭代结束的值重新被赋值。setTimeout里面的function()属于一个新的域，通过 var 定义的变量是无法传入到这个函数执行域中的，通过使用 let 来声明块变量，这时候变量就能作用于这个块，所以 function就能使用 i 这个变量了；这个匿名函数的参数作用域和 for参数的作用域不一样，是利用了这一点来完成的。这个匿名函数的作用域有点类似类的属性，是可以被内层方法使用的。

查了一下百度的一个答案：

setTimeout是一次执行函数，这里是10ms后执行，仅仅执行一次；for（var i=0;i<=3;i++）,i的每次取值都是执行setTimeout这个函数，并没有执行setTimeout里面的function（即闭包函数）,setTimeout里面的function是有setTimeout的定时触动的，也就是10ms后执行，也就是说i从0~3时，一共执行了4次的setTimeout()函数，此时的i的值是4，由于for语句的执行速度远小于1秒，所以,1秒后，由setTimeout()函数定时触动的闭包函数function()开始执行，alert(i);i的值已经是4了，所以相继打印4次i.

实现60s倒计时效果，并在控制台输出。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <script type="text/javascript" src="./code/lib/jQuery/jQuery-1.8.3-min.js"></script>
    <script type="text/javascript">
        var setTime;
        $(document).ready(function(){
            var time=parseInt($("#time").text());
            setTime=setInterval(function(){
                if(time<=0){
                    clearInterval(setTime);
                    return;
                }
                time--;
                $("#time").text(time);
                console.log(time);
            },1000);
        });

    </script>
</head>
<body>
    <span id="time">60</span>
</body>
</html>