关于javascript:超时调用与间歇调用

一、超时调用 setTimeout()

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

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

    <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, ...)

  <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>