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