总所周知 js 里面的 setTimeout() 方法是用来设定某些功能在某段时间间隔之后执行的。但是今天看了高程对定时器的描述发现并不是这样。

setTimeout(function(){
//.code
}, 250);

如上设置一个延迟执行的函数,字面上理解是匿名函数体内的代码将会在 250毫秒后执行,但是事实并不是这样。

js 执行代码是单线程的,就是说只能逐个逐个执行(不知道说得对不对),将要执行的代码看成一条时间轴,首先执行的代码是script 标签内的一些对生命周期后面要用到的代码进行部署。当某段时间段空闲的时候,后面的代码才会被迅速被执行。举个例子:

例如现在脚本里有这样一堆代码:

var fn = function(){
//里面的代码执行了300毫秒
}(); setTimeout(function(){
//.code
}, 250); 

fn 这个自执行的函数执行的时候耗时300毫秒,然后才会到下面的 setTimeout 函数执行。

换句话说 setTimeout 函数的执行是当当前执行环境空闲的时候再延迟250毫秒执行自身的代码块,当执行完了 fn 函数之后,环境再开始执行setTimeout 函数。

所以setTimeout 这个函数实际上延迟了 300(fn 执行的时间) + 250(自身延迟时间)= 550毫秒 才被执行,有时候可能还会慢一点

【笔记】js 关于定时器的理解的更多相关文章

  1. [学习笔记]JS中闭包的理解

    一.闭包概念的理解 闭包,又称为词法闭包或函数闭包指引用了自由变量的函数.这个被引用的自由变量将和这个函数一同存在,即使已经离开了创造它的环境也不例外. 自由变量:该变量既不是函数本身定义的也不是函数 ...

  2. 我对 impress.js 源码的理解

    源码看了两天,删掉了一些优化,和对 ipad 的支持,仅研究了其核心功能的实现,作以下记录. HTML 结构如下: <!doctype html> <html lang=" ...

  3. 关于js执行机制的理解

    js是单线程语言.指的是js的所以程序执行通过仅有的这一个主线程来执行. 但是还有辅助线程,包括定时器线程,ajax请求线程和事件线程. js的异步我理解的是: 主线程执行时候,从上到下依次执行,遇到 ...

  4. Node.js Event Loop 的理解 Timers,process.nextTick()

    写这篇文章的目的是将自己对该文章的理解做一个记录,官方文档链接The Node.js Event Loop, Timers, and process.nextTick() 文章内容可能有错误理解的地方 ...

  5. 对js原型简单的理解和图解

    对js原型简单的理解和图解 最近在努力的学习js中,今天就抽了个空把自己理解的原型,记下一下在笔记中,以后自己查看,有空在会把原型链记录一下. 1.prototype prototype:是一个函数的 ...

  6. 前端学习:学习笔记(JS部分)

    前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解)    JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介 新建步骤 <body ...

  7. js参数arguments的理解

    原文地址:js参数arguments的理解 对于函数的参数而言,如下例子 function say(name, msg){ alert(name + 'say' + msg); } say('xiao ...

  8. js赋值运算的理解

    简介 js引擎由于为了效率,很多时候的非直接量赋值都不是copy一份在赋值给新的变量,而是一个引用 ps:直接量:直接值数字字符串等 为什么使用len = doms.length; 里的len效率要比 ...

  9. js 模块化的一些理解和es6模块化学习

    模块化 1 IIFE 2 commonjs 3 浏览器中js的模块化 4 简单理解模块加载器的原理  5 es6 之前在参加百度前端技术学院做的小题目的时候,自己写模块的时候 都是写成立即调用表达式( ...

随机推荐

  1. 关于在webapi + ef + 视图 + top查询的问题

    在ef中使用视图中有一种坑是视图没有主键,表现的形式是有些数据会出现重复,解决的方法是手动在视图中添加主键即可 在实际的项目中碰到另一种坑,即使用webapi查询时的一种,现记录情况如下: 1:随便创 ...

  2. thinkphp+dwz完成的一个号码查询小系统

    基于网友的例子(http://www.thinkphp.cn/extend/450.html),改进完成一个电话号码查询管理系统.基于thinkphp+dwz完成的电话号码查询小系统,主要改进与功能如 ...

  3. Django2.x版本路由系统的正则写法以及视图函数的返回问题

    一.关于url.py urlpatterns每个元素的不再用url(),而是path(),最重要的一点是,正则的使用需要你自己手动导入re_path,并且在每个使用正则匹配的的元素用re_path() ...

  4. Delphi 设计模式:《HeadFirst设计模式》Delphi7代码---工厂模式之简单工厂

    简单工厂:工厂依据传进的参数创建相应的产品. http://www.cnblogs.com/DelphiDesignPatterns/archive/2009/07/24/1530536.html { ...

  5. Ionic-wechat项目边开发边学(三):自定义样式,指令,服务

    摘要 上一篇文章主要介绍了一个ionic项目的标准目录结构,header标签的使用,以及页面之间的切换.这篇文章实现的功能有: 消息数据的获取, 消息列表的展示, 消息标为已读/未读, 主要涉及的到的 ...

  6. Python 实现腾讯新闻抓取

    原文地址:http://www.cnblogs.com/rails3/archive/2012/08/14/2636780.htm 思路: 1.抓取腾讯新闻列表页面: http://news.qq.c ...

  7. 关于std::ios::sync_with_stdio(false)

    std::ios::sync_with_stdio(false); 很多C++的初学者可能会被这个问题困扰,经常出现程序无故超时,最终发现问题处在cin和cout上,(甚至有些老oier也会被这个问题 ...

  8. python调试工具----pycharm快捷键及一些常用设置

    pycharm快捷键及一些常用设置 Alt+Enter 自动添加包Ctrl+t SVN更新Ctrl+k SVN提交Ctrl + / 注释(取消注释)选择的行Ctrl+Shift+F 高级查找Ctrl+ ...

  9. Oracle unique / distinct

     [唯一]DISTINCT与UNIQUE的“区别”  今天一个朋友在Oracle中偶然发现UNIQUE也可以得到唯一的数据结果,问到DISTINCT与UNIQUE的区别.答案是:他们没有区别!   d ...

  10. 具有jQuery背景的程序员如何转换为AngularJS思考模式(译)

    最近一直在研究angularjs,最大的感受就是它和之前的jQuery以及基于jQuery的各种库设计理念完全不同,如果不能认识到这点而对于之前做jQuery开发的程序员,去直接学习angularjs ...