js中定时器与延时器的用法

js中定时器的主要语法有以下四个:

添加定时器:

• setTimeout("js语句",时间)
• setInterval("js语句",时间)

删除定时器(此处的timer(自定义)是定时器的顺序,在后面的部分我会介绍到):

• clearTImeout(timer)
• clearInterval(timer)

然后我们介绍一下它们的具体用法:

 setTimeout 只能执行一次,请看下面的代码:

 <div class="container"></div>
    <script>
        var div = document.querySelector('.container');
        function print() {
            let fragment = document.createDocumentFragment();
                var box = document.createElement('div');
                box.setAttribute('class','box1')
                fragment.append(box)
                div.append(fragment)
        }
        var timer = setTimeout('print()',1000);
    </script>

执行的效果如下面所示(只能生成一个小盒子)

setInterval中这个函数可以无限循环执行,将上面的倒数第二行代码替换成如下代码,则效果会有天差别的的变化:

 var timer = setInterval('print()',1000);

执行的效果如下图所示,可以无限次生成盒子:

 

 也可以直接将函数写在定时器中,具体可看个人喜好.如下面的代码:

 var x = setInterval(function(){
            let fragment = document.createDocumentFragment();
                var box = document.createElement('div');
                box.setAttribute('class','box1')
                fragment.append(box)
                div.append(fragment)
        },1000);

 定时器是有顺序的,当文件中存在多个定时器时,想要删除定时器就要通过定时器的返回值(即该定时器在文件中的顺序来进行删除),比如我在下面的代码中添加三个定时器,然后打印他们的值.

 var timer1 = setTimeout('print()',1000);
        var timer2 = setTimeout('print()',1000);
        var timer3 = setTimeout('print()',1000);
        var timer4 = setTimeout('print()',1000);
        console.log(`我是第一个定时器${timer1}`);
        console.log(`我是第二个定时器${timer2}`);
        console.log(`我是第三个定时器${timer3}`);
        console.log(`我是第四个定时器${timer4}`);

打印的结果如下图所示

想要清除定时器就要用clearTimeout()  和clearInterval()来清除已经设置的定时器,两者均只接受一个参数. 如下面的代码,清除刚才设置的四个定时器

        clearInterval(timer1);
        clearInterval(timer2);
        clearInterval(timer3);
        clearInterval(timer4);