理解setTimeout和setInterval
setTimeout和setInterval,这两个js函数都是用来定时执行。setTimeout执行一次,setInterval执行多次。
问题出现在今天,使用setInterval是,设置执行速度为1ms。这时setInterval就出现了延迟。它并没有严格按照1ms的速度执行。
var speed1=;
task1 = setInterval(function(){
var val1=parseInt(document.getElementById('font1').innerHTML);
if(val1> && val1<=){
val1--;
document.getElementById('font1').innerHTML=val1;
}else{
clearInterval(task1);
}
},speed1);
问题的原因要从javascript的单线程机制说起。对于长时间执行的任务设置短暂的时间间隔,那么在第一次执行完成之前,可能会由于执行不断的迭代造成延迟。因为setInterval的回调函数并不是到时后立即执行,而是等系统资源空闲下来后才会执行.而下一次触发时间则是在setInterval回调函数执行完毕之后才开始计时,所以如果setInterval内执行的计算过于耗时,或者有其他耗时任务在执行,setInterval的计时会越来越不准,延迟很厉害。
其实setTimeout和setInterval所谓的“异步调用”事实上是通过将代码段插入到代码的执行队列中实现的。
而如何计算插入的时间点呢?自然是要用到我们所说的timer,也就是计时器。当执行setTimeout和setInterval的时候,timer会根据你设定的时间“准确”地找到代码的插入点。当队列“正常”地执行到插入点时,就触发timer callback,也就是我们设定的回调函数。事实上setTimeout和setInterval只是简简单单地通过插入代码到代码队列来实现代码的延迟执行(或者说异步执行)。所谓的异步只是一个假象——它同样运行在一个线程上!
理解setTimeout和setInterval的更多相关文章
- 深入理解定时器系列第一篇——理解setTimeout和setInterval
× 目录 [1]setTimeout [2]setInterval [3]运行机制[4]作用[5]应用 前面的话 很长时间以来,定时器一直是javascript动画的核心技术.但是,关于定时器,人们通 ...
- 深入理解setTimeout和setinterval
以前一直以为这两个函数就是简单了认为类似thread一样的东西, 认为会在一个时间片内, 并发的执行调用的函数, 似乎很好很强大, 但其实并不是如此, 实际的情况是javascript都是以单线程的方 ...
- JavaScript的setTimeout和setInterval的深入理解
发表过一片博客<跟着我用JavaScript写计时器>,比较基础.....有网友说应该写一下setTimeout的原理和机制,嗯,今天就来写一下吧: 直奔主题:setTimeout和set ...
- setTimeout和setInterval的深入理解
以前写的setTimeout和setInterval的文章有些不足之处,今天抽时间整理了一下,要想真正理解还得从javascript的单线程机制说起 大概半年前发表过一篇关于setTimeout和se ...
- Javascript异步编程之setTimeout与setInterval详解分析(一)
Javascript异步编程之setTimeout与setInterval 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程(注意:特别解释:是总结,本人也是菜鸟,所以总结不好的,请各位大牛 ...
- 【转】Javascript异步编程之setTimeout与setInterval
Javascript异步编程之setTimeout与setInterval 转自:http://www.tuicool.com/articles/Ebueua 在谈到异步编程时,本人最主要会从以下三个 ...
- 原生js轮播以及setTimeout和setInterval的理解
下面这个代码是从一个群下载下来的,为了帮助自己理解和学习现在贴出来,与初学者共勉. <!DOCTYPE html> <html> <head> <meta c ...
- setTimeout和setInterval定时器使用详解测试
var len=4; while(len--){ var time=setTimeout(function(){ console.log(len); },0); console.log(time); ...
- setTimeout,setInterval原理
function a() { setTimeout(function(){alert(1)},0); alert(2); } a(); 和其他的编程语言一样,Javascript中的函数调用也是通过堆 ...
随机推荐
- 20145229吴姗珊 《Java程序设计》2天小总结
20145229吴姗珊 <Java程序设计>2天小总结 教材学习内容总结 由于这周学的内容比较简单,主要是关于日期.日期之类的东西.所以自己从书上看了一些内容 总结了第四章 认识对象 和第 ...
- electron—Chromium有酒,Node有肉
谷歌V8引擎的出现,Node.js的诞生注定要把开发模式“搅乱”. 基于云应用,服务化,定制化的应用需求不断增加后使得传统的winform开发空间越来越小,而原来做前端的空间越来越大,Node.js ...
- 数据分析第二篇:matplotlib 常用的几个绘图方法
Matplotlib matplotlib是python的绘图库,使用它可以很方便的绘制出版质量级别的图形 matplotlib的基本功能 1.基本绘图 1.1 绘制坐标系中连续的线,设置线型/线宽/ ...
- Jquery实现超酷的时间轴特效
Timeline时间轴Jquery特效是一款现在互联网上非常流行的一种布局结构,结合了瀑布流布局,最近很多网友问到这种特效,网站上有网友们分享过一款,功能虽然实现,但样式不太好看,今天就把它整理出来分 ...
- JavaScript基础挖掘目录
前端基础进阶(一):内存空间详细图解 前端基础进阶(二):执行上下文详细图解 前端基础进阶(三):变量对象详解 前端基础进阶(四):详细图解作用域链与闭包 前端基础进阶(五):全方位解读this 前端 ...
- php数据结构课程---2、链表(php中 是如何实现单链表的(也就是php中如何实现对象引用的))
php数据结构课程---2.链表(php中 是如何实现单链表的(也就是php中如何实现对象引用的)) 一.总结 一句话总结: php是弱类型语言,变量即可表示数值,也可表示对象:链表节点的数据域的值就 ...
- gethub的安装
下载地址: windows的下载地址 https://gitforwindows.org/ 一.安装 win下的安装注意要点: 1.环境变量 2.文件结束符如何处理(windows下/r/n,linu ...
- (转)Java字符串转日期或日期转字符串
文章中,用的API是SimpleDateFormat,它是属于java.text.SimpleDateFormat,所以请记得import进 来! 用法: SimpleDateFormat sdf = ...
- 11 Python 文件操作
文件操作基本流程 计算机系统分为:计算机硬件,操作系统,应用程序三部分. 我们用python或其他语言编写的应用程序若想要把数据永久保存下来,必须要保存于硬盘中,这就涉及到应用程序要操作硬件,众所周知 ...
- ATL实现COM组件
参考文献:https://blog.csdn.net/Marcus2006/article/details/41978799 ATL实现COM组件比较简单,关键是在程序中如何调用该组件. vs2010 ...