定时 ——setTimeout | setInterval

使用场景，setTimeout 只调用一次，setInterval 会重复调用，直到清除或重载。

<div id="countDown"></div>
<script>
    var num = 10;
    function countDown() {
        console.log(num)
        num--;

        // 清除
        num == 0 ? clearInterval(clearId) : "";
    }

    console.log("直接调用，只执行一次 num = 10")
    countDown();

    // tip：为啥打印放里面咧，因为 setTimeout 是异步执行啊
    setTimeout(function() {
        console.log("setTimeout 调用，只执行一次 num = 9")
        countDown();
    }, 1000);

    var clearId = setInterval(function() {
        num == 8 ? console.log("setInterval 调用，一直执行，直到页面重载或 clearInterval 控制") : "";
        countDown();
    }, 1000);
</script>

 

 

setTimeout 调用多次的使用：A > B > C > B > C > b …

 

  

三种方式，其中第一种不常见。

<div id="countDown"></div>
<script>
    var num = 5;
    function countDownFun() {
        console.log(num);
        num--;

        // 清除位置 1 —— 适用于调用方式 1、2、3
        // num == 0 ? clearInterval(clearId) : "";
    }

    // setInterval() 调用方式 1，第一个参数如果是调用了方法，则加上引号: '' 或 ""
    // var clearId = setInterval("countDownFun()", 1000);

    // setInterval() 调用方式 2，第一个参数为方法名（引用）
    // var clearId = setInterval(countDownFun, 1000);

    // setInterval() 调用方式 3，第一个参数为声明函数（匿不匿名都行啦）
    var clearId = setInterval(function fun() {
        // 清除位置 2 —— 针对调用方式 3
        num == 0 ? clearInterval(clearId) : "";
        countDownFun();
    }, 1000);
</script>