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的更多相关文章

  1. 深入理解定时器系列第一篇——理解setTimeout和setInterval

    × 目录 [1]setTimeout [2]setInterval [3]运行机制[4]作用[5]应用 前面的话 很长时间以来,定时器一直是javascript动画的核心技术.但是,关于定时器,人们通 ...

  2. 深入理解setTimeout和setinterval

    以前一直以为这两个函数就是简单了认为类似thread一样的东西, 认为会在一个时间片内, 并发的执行调用的函数, 似乎很好很强大, 但其实并不是如此, 实际的情况是javascript都是以单线程的方 ...

  3. JavaScript的setTimeout和setInterval的深入理解

    发表过一片博客<跟着我用JavaScript写计时器>,比较基础.....有网友说应该写一下setTimeout的原理和机制,嗯,今天就来写一下吧: 直奔主题:setTimeout和set ...

  4. setTimeout和setInterval的深入理解

    以前写的setTimeout和setInterval的文章有些不足之处,今天抽时间整理了一下,要想真正理解还得从javascript的单线程机制说起 大概半年前发表过一篇关于setTimeout和se ...

  5. Javascript异步编程之setTimeout与setInterval详解分析(一)

    Javascript异步编程之setTimeout与setInterval 在谈到异步编程时,本人最主要会从以下三个方面来总结异步编程(注意:特别解释:是总结,本人也是菜鸟,所以总结不好的,请各位大牛 ...

  6. 【转】Javascript异步编程之setTimeout与setInterval

    Javascript异步编程之setTimeout与setInterval 转自:http://www.tuicool.com/articles/Ebueua 在谈到异步编程时,本人最主要会从以下三个 ...

  7. 原生js轮播以及setTimeout和setInterval的理解

    下面这个代码是从一个群下载下来的,为了帮助自己理解和学习现在贴出来,与初学者共勉. <!DOCTYPE html> <html> <head> <meta c ...

  8. setTimeout和setInterval定时器使用详解测试

    var len=4; while(len--){ var time=setTimeout(function(){ console.log(len); },0); console.log(time); ...

  9. setTimeout,setInterval原理

    function a() { setTimeout(function(){alert(1)},0); alert(2); } a(); 和其他的编程语言一样,Javascript中的函数调用也是通过堆 ...

随机推荐

  1. Recovery模式【转】

    本文转载自:http://tieba.baidu.com/p/2299027486 Recovery模式是手机系统的一个工程模式,作用是恢复和清除.用户进入这个模式之后,可以对当前系统的一些数据进行清 ...

  2. hive启动时 Terminal initialization failed; falling back to unsupported java.lang.IncompatibleClassChangeError: Found class jline.Terminal, but interface was expected

    错误提示信息如下 [ERROR] Terminal initialization failed; falling back to unsupported java.lang.IncompatibleC ...

  3. Build Antlr4 projects with eclipse java project template.

    from:https://shijinglu.wordpress.com/2015/01/22/build-antlr4-projects-with-eclipse-java-project-temp ...

  4. 【海量之道】海量之道之SET模型

    本文介绍了set模型. 一 提供海量服务时面对的场景 场景1:如何令黄村机房的TWS机器访问黄村机房的APP服务,避免TWS跨机房调用永丰机房的APP机器? 场景2:DB和Redis如何实现快慢分离, ...

  5. 修改(python) mysql 数据库 使其可以支持插入中文

    先建立一个数据库,名字叫xsk #!/usr/bin/python3 # -*- coding:utf-8 -*- import pymsql # 打开数据库连接(本机,用户,密码,数据库名) db ...

  6. GeoServer基础教程(四):空间数据互操作的接口规范WMS、WFS和WCS

    转载:https://ethanblog.com/tech/all-about-wms-wfs-and-wcs.html 前面几节介绍了GeoServer基础教程的一些基本操作,相信大家对GeoSer ...

  7. C - Alyona and SpreadsheetDP

    题目链接 题意在一个矩阵中,询问l~r行是否有一列满足mp[i][j]>=mp[i-1][j](i属于l~r)即非递减序列,是输出Yes,否输出No 用vector<vector<i ...

  8. 【构建二叉树】01根据前序和中序序列构造二叉树【Construct Binary Tree from Preorder and Inorder Traversal】

    我们都知道,已知前序和中序的序列是可以唯一确定一个二叉树的. 初始化时候二叉树为:================== 前序遍历序列,           O================= 中序遍 ...

  9. 2017-2018-1 20179215《Linux内核原理与分析》第二周作业

    20179215<Linux内核原理与分析>第二周作业 这一周主要了解了计算机是如何工作的,包括现在存储程序计算机的工作模型.X86汇编指令包括几种内存地址的寻址方式和push.pop.c ...

  10. [Luogu3960][NOIP2017]列队

    luogu sol 震惊!\(NOIP\)居然也出数据结构! 话说回来,其实只需要对每一行的前\(m-1\)个人维护一个数据结构,然后对最后一列的\(m\)个人也维护一个数据结构就好了.具体的话写平衡 ...