超时调用与间歇调用

一、超时调用setTimeout()

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

setTimeout(coda/function,milliseconds,param1, param2, ...)

code/function	必需。要调用一个代码串，也可以是一个函数。
milliseconds	可选。执行或调用 code/function 需要等待的时间，以毫秒计。默认为 0。
param1, param2, ...	可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。

    <button onclick="myset()">点一点变色</button>
    <p id="p">1:4:9黑色石碑</p>
    <script>
        var p=document.getElementById('p');
        function myset(){
            setTimeout(()=>{
                p.style.color='red';
            },3000)        //三秒后字体变红
        };
    </script>

clearTimeout()用于取消超时调用

  <button onclick="myset()">点一点变色</button>   <!--先点击-->
    <button onclick="qx()">点击取消</button>       <!--3秒内点击便可取消变色-->
    <p id="p">1:4:9黑色石碑</p>
    <script>
        var p=document.getElementById('p');
        var my;
        function myset(){
            my=setTimeout(()=>{
                p.style.color='red';
            },3000)
        };
        function qx(){
            clearTimeout(my);  //取消超时调用
        }
    </script>

二、间歇调用setInterval()

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭

setInterval(coda/function,milliseconds,param1, param2, ...)

code/function	必需。要调用一个代码串，也可以是一个函数。
milliseconds	必须。周期性执行或调用 code/function 之间的时间间隔，以毫秒计。
param1, param2, ...	可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。

  <button onclick="zz()">点击自增</button>
    <p id="p">1</p>
    <script>
        var p=document.getElementById('p');
        var i=1;
        function zz() {
            res=setInterval(zt,1000)
        }                       //每隔1秒p标签里面的数字会如2，3，4，5，6……这般实现自增
        function zt(){
            i++;
            p.innerText=i;
        }
    </script>

clearInterval()用于取消超时调用

    <button onclick="zz()">点击自增</button>   
    <!-- 点击自增 -->
    <button onclick="qx()">取消自增</button>
    <!-- 自增后点击取消自增 -->
    <p id="p">1</p>
    <script>
        var p=document.getElementById('p');
        var i=1;
        function zz() {
            res=setInterval(zt,1000)
        }
        function zt(){
            i++;
            p.innerText=i;
        }
        function qx(){
            clearInterval(res);     //取消间歇调用
        }
    </script>

三、this指向

超时函数的代码都是在全局作用域中执行的，因此函数的this值在非严格模式下指向window对象，在严格模式下是undefined。

   //setTimeout()和setInterval()
   <script>
        var name = '全局'
        var obj = {
            name: '局部',
            bb: function () {
                setTimeout('console.log(this.name)', 3000)  //指向全局
                setInterval('console.log(this.name)', 1000)    //指向全局
            },
            cc: function () {
                console.log(this.name);
            }
        }
        obj.bb();  //全局
        obj.cc();  //局部
    </script>

四、超时调用setTimeout()在满足一定条件后就可以自动停止，不需要使用clearTimeout()。因此，建议使用setTimeout()代替setInterval()去做一些操作，例如

    <p id="p">10</p>
    <script>
        var p =document.getElementById('p');
        var s=10;
        function my(){   
            s--;
            p.innerText=s;
            if(s>1){
                setTimeout(my,2000)
            }else{
                p.innerText=s;
            }
        }
        my();
    </script>