JavaScript中BOM对象的超时调用以及间歇调用

好久没有更新博客了，大家有没有想我呀~（其实并没有人，假装有很多人的样子，嘻嘻）

好了，言归正传，今天我要总结的知识是BOM对象中的两个关于时间的调用方法，分别是超时调用和间歇调用，下面我来介绍一下这两种方法。

引子

问题：为什么会有这两种方法呢？

答：因为JavaScript是单线程语言，代码的实现都是按照顺序实现的；但有时候我们希望能先实现一部分代码，而代码的位置又不好改变的时候，它们就派上了用场，而且它们的作用不仅仅如此哟，如果想要知道更多的话就接着往下看吧。

超时调用

含义：所谓的超时调用，就是使原本可以立即发生的事情，推迟发生

语法：setTimeout(code,millisec)

功能：在指定的毫秒数后调用函数或者计算表达式

参数说明：

code:要调用的函数或要执行的JS代码

millisec:在执行这个代码之前需要等待的毫秒数

下面举一个简单的例子（这个例子我就不展示效果了，毕竟时间延迟这个东西用图表现不出来，你懂的）

//setTimeout()举例
       setTimeout(function () {
           alert("hello");
       },1000);

这个方法使用起来还是挺简单易懂的，只是有些地方需要注意一下。比如说在code参数中最好放函数名，最好不要直接放代码，如果代码像我这样很少可以放里面，最好是在外面定义好函数再放进去，我后面的例子会讲解；还有注意millisec中放的是毫秒，所以这里的1000其实指的是1秒。

消除超时调用

含义：消除超时调用，顾名思义就是使超时调用失效的方法，这个方法可能听起来没什么大用处，但是和超时调用结合起来使用作用还是很大的。

语法：clearTimeout(id_of_setTimeout)

功能：取消由setTimeout（）方法设置的setTime（）

参数说明：id_of_setTimeout是指由setTimeout返回的ID值，该值表示要取消延迟执行的代码块

间歇调用

含义：所谓的间歇调用，就是使原来只发生一次的事件，在间隔一定时间后自动发生，而且不停止

语法：setInterval(code,millisec)

功能：每隔指定的时间执行一次代码

参数说明：

code:要调用的函数或要执行的JS代码

millisec:周期性执行代码或调用函数之间的间隔时间，用毫秒来计

举例：

//setInterval举例
       setInterval(function () {
           console.log("1");
       },1000);

这个例子的意思是每间隔1秒就在后台打印一个1，具体效果可以自己去试试看，这里要注意的地方和前面的超时间隔一样。

消除间接调用

含义：消除间歇调用，顾名思义就是使间歇调用失效的方法

语法：clearInvertal(id_of_setTimeout)

功能：取消由setInvertal()方法设置的setInvertal()

参数说明：id_of_setTimeout是指由setInvertal返回的ID值，该值表示要取消周期执行的代码块

方法使用举例

例1  用setTimeout（）实现setInterval（）的功能

源代码：

//用setTimeout()实现间歇调用的功能
        var fun=function(){
            console.log("1");
            setTimeout(fun,1000);
        }
        
        setTimeout(fun,1000);//

核心思想：这里需要注意的是，最重要的思想是就是要将超时调用放在自己调用的函数里执行，上述代码中的红色部分就是。

例2  用setInterval（）实现在后台连续打印1~10的功能

源代码：

//小问题：让number初值为1，并且每隔1秒递增一下，直到number的值为10
       var number=1;
       var count=function(){
           console.log(number);
           number+=1;
       }
       var clear=setInterval(count,1000);
       //设置超时调用，使在1秒1000毫秒的时候停止间隔调用，即只打印到10
       setTimeout(function(){
           clearInterval(clear)},11000);

核心思想：这里可能就有点儿难理解，但是其实把每一个方法都搞懂了，这个例子也不难搞懂。而且这个题的方法不止这一种，也可以用if语句甚至循环解决，但是由于本次讲解的是这两个调用方法，那就充分发挥他们的作用吧。

例3  只用setTimeout（）实现在后台连续打印1~10的功能

源代码：

 //全部用setTimeout()方法实现上面的小问题
        var number=1;
        function add() {
            console.log(number);
            number+=1;
            if(number<=10){   
                setTimeout(add,1000);//如果满足条件就进行调用
            }else{
                clearTimeout(clearadd);//消除间隔调用
            }
            

        }

       var clearadd= setTimeout(add,1000);

核心思想：这里就是上面的例子的结合了，最关键的一点还是setTimeout（）要实现间隔调用的话就要把语句放在调用的函数中进行内嵌套。

好了，今天我的分享就到这儿了，如果有什么不懂的或者发现有错误的地方可以联系我哟！