`

理解setTimeout和setInterval

    博客分类:
  • JS
阅读更多
甚至可能会错误的把两个实现定时调用的函数理解成了类似thread一样的东西, 认为会在一个时间片内, 并发的执行调用的函数, 似乎很好很强大, 但其实并不是如此, 实际的情况是javascript都是以单线程的方式运行于浏览器的javascript引擎中的, setTimeout和setInterval的作用只是把你要执行的代码在你设定的一个时间点插入js引擎维护的一个代码队列中, 插入代码队列并不意味着你的代码就会立马执行的,理解这一点很重要. 而且setTimeout和setInterval还有点不一样.

先谈谈setTimeout
复制代码 代码如下:
function click() {
// code block1...
setTimeout(function() {
// process ...
}, 200);
// code block2
}

假设我们给一个button的onclick事件绑定了此方法, 当我们按下按钮后, 肯定先执行block1的内容, 然后运行到setTimeout的地方, setTimeout会告诉浏览器说, "200ms后我会插一段要执行的代码给你的队列中", 浏览器当然答应了(注意插入代码并不意味着立马执行), setTimeout代码运行后, 紧跟其后的block2代码开始执行, 这里就开始说明问题了, 如果block2的代码执行时间超过200ms, 那结果会是如何? 或许按照你之前的理解, 会理所当然的认为200ms一到, 你的process代码会立马执行...事实是, 在block2执行过程中(执行了200ms后)process代码被插入代码队列, 但一直要等click方法执行结束, 才会执行process代码段, 从代码队列上看process代码是在click后面的, 再加上js以单线程方式执行, 所以应该不难理解. 如果是另一种情况, block2代码执行的时间<200ms, setTimeout在200ms后将process代码插入到代码队列, 而那时执行线程可能已经处于空闲状态了(idle), 那结果就是200ms后, process代码插入队列就立马执行了, 就让你感觉200ms后, 就执行了.
再看看setInterval
这里可能会存在两个问题:
1.时间间隔或许会跳过
2.时间间隔可能<定时调用的代码的执行时间
复制代码 代码如下:
function click() {
// code block1...
setInterval(function() {
// process ...
}, 200);
// code block2
}


和上面一样我们假设通过一个click, 触发了setInterval以实现每隔一个时间段执行process代码



比如onclick要300ms执行完, block1代码执行完, 在5ms时执行setInterval, 以此为一个时间点, 在205ms时插入process代码, click代码顺利结束, process代码开始执行(相当于图中的timer code), 然而process代码也执行了一个比较长的时间, 超过了接下来一个插入时间点405ms, 这样代码队列后又插入了一份process代码, process继续执行着, 而且超过了605ms这个插入时间点, 下面问题来, 可能你还会认为代码队列后面又会继续插入一份process代码...真实的情况是,由于代码队列中已经有了一份未执行的process代码, 所以605ms这个插入时间点将会被"无情"的跳过, 因为js引擎只允许有一份未执行的process代码, 说到这里不知道您是不是会豁然开朗呢...

为了这种情况你可以用一种更好的代码形式


复制代码 代码如下:
setTimeout(function(){
//processing
setTimeout(arguments.callee, interval);
}, interval);



这个估计稍微想一下, 就明白其中的好处了, 这样就不会产生时间点被跳过的问题内容就到这里, 希望能有所帮助, 可能我表达的不是很清楚如果觉得自己英语基础不错可以直接看


里有关advanced Timers这节内容, 个人认为这本书真的很不错, 无论是想从零学起, 还是平日没事翻翻参考参考 都很不错, 作者是yahoo里很牛的一位前端开发工程师 : )


详细出处参考:http://www.jb51.net/article/26679.htm
分享到:
评论

相关推荐

    Javascript中, setTimeout() 和 setInterval() 的方法

    在JavaScript编程中,`setTimeout()`和`setInterval()`是两个非常关键的函数,它们用于实现异步编程,特别是在处理动画、定时任务或者延迟执行代码时不可或缺。这两个函数都是全局对象`window`的方法,它们的区别...

    Javascript定时器(二)——setTimeout与setInterval

    JavaScript定时器是编程中不...总之,理解并正确使用`setTimeout`和`setInterval`是JavaScript开发中的基础技能。它们可以帮助我们实现延迟执行、定时执行和周期性执行等功能,但同时也需要谨慎处理以防止潜在的问题。

    setTimeout和setInterval的区别

    在JavaScript中,定时...总之,理解`setTimeout`和`setInterval`的区别以及它们在实际开发中的应用是JavaScript编程中非常重要的一部分,能够帮助我们更好地控制代码的执行时机和频率,提高应用程序的性能和用户体验。

    JS中的setTimeout和setInterval的区别JS中的setTimeout和setInterval的区别

    通过以上的分析可以看出,尽管`setTimeout`与`setInterval`都可以用来控制代码的执行时间,但它们的应用场景和执行方式存在本质的区别。正确理解和运用这两个函数对于提高JavaScript程序的性能和用户体验至关重要。

    快速掌握Node.js中setTimeout和setInterval的使用方法

    在Node.js开发中,理解setTimeout和setInterval的工作原理及其限制对于编写有效和高效的代码是非常重要的。开发者应当认识到事件循环的特性,合理安排定时器的使用,避免在关键流程中过度依赖定时器,以确保应用程序...

    深化理解setTimeout函数和setInterval函数_.docx

    JavaScript中的`setTimeout`和`setInterval`是两个非常重要的函数,它们主要用于在特定时间间隔后执行指定的函数或代码块。这两个函数对于创建动态、交互式的网页内容至关重要,如动画效果、倒计时、定时刷新内容等...

    setTimeout和setInterval的深入理解

    事实上,setTimeout和setInterval并没有我们字面上理解的那么简单。要真正掌握并理解这两个方法,还得从javascript的单线程机制说起。 【开门见山】setTimeout和setInterval是如何工作的呢? 我们知道,js是单线程...

    JavaScript定时器:`setTimeout`和`setInterval`的深入指南

    在JavaScript编程中,定时器是控制...通过本文的介绍,你应该对setTimeout和setInterval有了更深入的理解,以及如何在实际项目中有效地使用它们。记住,掌握这些基础知识是成为一名优秀的JavaScript开发者的重要一步。

    vue 解决setTimeOut和setInterval函数无效报错的问题

    总之,理解JavaScript的`this`指向以及Vue中`setTimeout`和`setInterval`的正确使用方式,以及熟悉Element UI等UI库的API规范,是避免这类问题的关键。通过使用箭头函数来保持`this`的正确指向,以及按照UI库的推荐...

    setTimeout和setInterval的区别你真的了解吗?

    setTimeout和setInterval的作用只是把你要执行的代码在你设定的一个时间点插入js引擎维护的一个代码队列中, 插入代码队列并不意味着你的代码就会立马执行的,理解这一点很重要. 而且setTimeout和setInterval还有点不...

    理解javascript定时器中的setTimeout与setInterval

    本文将深入讲解JavaScript中的两个重要定时器函数:`setTimeout`和`setInterval`。 首先,`setTimeout`函数用于在指定延迟时间后执行一次函数或代码片段。其基本语法如下: ```javascript var timeoutID = window....

    JavaScript中从setTimeout与setInterval到AJAX异步

    在JavaScript中,setTimeout和setInterval是两种常见的定时器函数,用于实现异步操作。JavaScript作为单线程语言,其主线程的执行是顺序的,但是在处理某些操作,如延时任务或者周期任务时,会借助事件循环机制和回...

    深入理解setTimeout函数和setInterval函数

    深入理解JavaScript中的`setTimeout`和`setInterval`函数是网页动态效果实现的关键。这两个函数都是JavaScript的定时器函数,能够让我们在特定的时间间隔后执行指定的代码。 **1. `setTimeout`函数** `setTimeout`...

    jquery+css3实现的彩色进度条加载动画效果源码.zip

    4. JavaScript 时间管理和动画控制:理解 setTimeout 和 setInterval 的作用以及如何配合 jQuery 实现动画效果。 5. HTML 结构:构建包含进度条的网页布局。 6. 跨浏览器兼容性:考虑到不同浏览器对 CSS3 和 ...

    cpp-timercpp为C开发提供类似于Javascript中的setTimeout和setInterval功能

    `timercpp` 是一个C++库,它的主要目的是为C++开发者提供类似于JavaScript中的`setTimeout`和`setInterval`这两个函数的功能。在JavaScript中,`setTimeout`用于在指定的时间后执行一次回调函数,而`setInterval`则...

    JavaScript中setTimeout和setInterval函数的传参及调用

    在JavaScript编程中,我们经常需要处理时间延迟或周期性任务执行的需求,这时会用到setTimeout和setInterval这两个全局函数。 setTimeout函数用于在指定的毫秒数后执行一次代码块,而setInterval则用于每隔指定的...

    JavaScript王者归来中文源码

    5. **事件循环与定时器**:深入解析浏览器中的事件循环模型,理解setTimeout和setInterval的工作原理,有助于避免异步编程中的常见陷阱。 6. **DOM操作**:讲解如何使用JavaScript与HTML文档交互,包括元素选择、...

Global site tag (gtag.js) - Google Analytics