setInterval与setTimeout的区别?

setIntervalsetTimeoutjs中常见的两个定时器,两者之间都有什么区别呢?

setTimeout

setTimeout表示设置一个定时器,在多少秒以后执行这个函数或者代码,只执行一次,返回的是timeoutID定时器编号),这个值可以传递给clearTimeout()来取消定时器。

语法:

var timeoutID = timer2.setTimeout(function[, delay, param1, param2, ...]);

var timeoutID = timer2.setTimeout(function[, delay]);

var timeoutID = timer2.setTimeout(code[, delay]);

注意:参数delay可以被省略,此时默认值为0

比如:

//两秒后执行一次,总体一次

var timer2=setTimeout(function(){

console.log(timer2);

},2000);

//返回timeoutID(定时器编号)

console.log(timer2);

执行过程如下:


 需要注意的是:只有当调用setTimeout()的线程停止后,函数或代码段才能继续执行。

传递字符串字面量

setTimeout除了可以有以上的执行方式,还可以通过以下方法:

var timer2=setTimeout("console.log('timer2');",2000);

console.log('2');

执行结果在控制台中的输出和以上代码是一样的。但是在这个执行过程中,字符串会在全局作用域中被解析执行,字符串内容会被解析为一段动态生成的函数代码,所以当setTimeout()函数执行完毕后,字符串中的变量不可用。这种功能效果类似于eval(..),提倡不使用!

最小延迟时间

实际运行的延迟时间比setTimeout设置的延迟时间要大,其中最主要的原因就在于:由于JavaScript运行在单线程的环境中,只有当调用 setTimeout()的主线程执行完其他任务代码后,回调函数和代码段才能被执行。

比如,调用的这个setTimeout函数的延迟为2s,当执行到setTimeout时,先将这个任务保存放入到队列中,执行后续的任务,当满足一定的条件时,再将setTimeout执行。如果执行后续的任务的时间为3s,那么原本设置的延迟2s后执行的任务,5s后才执行。所以这个延迟设置的时间实际上时并不准确,如果想要的精确的时间控制,setTimeout是不可靠的。

这也就是在以上的代码中,我们最先调用的是setTimeout,但是console.log()代码先执行的原因。

图例:


关于this指向

当向 setTimeout() (或者其他函数)传递一个函数时,该函数中的this会指向一个错误的值.由于由setTimeout()调用的代码运行在与所在函数完全分离的执行环境上。这会导致,这些代码中包含的 this 关键字在非严格模式会指向 window (或全局)对象,严格模式下为 undefined,这和所期望的this的值是不一样的。

注意:在严格模式下,setTimeout( )的回调函数里面的this仍然默认指向window对象, 并不是undefined

setInterval

setInterval表示:重复调用一段代码或者函数,返回的是一个 intervalID,这个值可以作为参数传递给clearInterval()

语法:

let intervalID = window.setInterval(func, delay[, param1, param2, ...]);

        let intervalID = window.setInterval(code, delay);

比如

//每隔2s执行一次,无数次

var timer1=setInterval(function(){

console.log('timer1')

},2000);

//返回一个 intervalID

console.log(timer1);

执行过程如下:


setInterval会每隔两秒无数次的调用定时器执行console.log('timer1')这行代码

注意:Delaycode,实际延迟时间、this指向与setTimeout类似。

总结:

在浏览器中,setTimeout()setInterval() 的每调用一次定时器的最小间隔是4ms,这通常是由于函数嵌套导致(嵌套层级达到一定深度),或者是由于已经执行的setInterval的回调函数阻塞导致的。


初学JavaScript,欢迎指出错误,欢迎补充!

猜你喜欢

转载自blog.csdn.net/xzz2222/article/details/80329523