一、setTimeout基础
setTimeout(func|code,delay);
第一个参数表示将要推迟的函数名或者一段代码,第二个参数表示推迟执行的毫秒数
 
eg:
console.log();
setTimeout('console.log(2)',);
console.log(); answer:
 
*:推迟的代码必须以字符串的形式,因为引擎内部使用eval()函数,将字符串转为代码。
*:如果推迟执行的是函数,则可以直接将函数名,放入setTimeout()
 
eg:
function func(){
  console.log();
}
setTimeout(func,);
//或者
setTimeout(function(){
  console.log();
},)

*:如果写成setTimeout(func(),5000);func会立即执行

二、setTimeout支持更多的参数
eg:
setTimeout(function(a,b){
  console.log(a+b);
},1000,4,5) //4,5 9
//'str' '2' str2
 
*:从第三个参数开始,依次用来表示第一个参数(回调函数)传入的参数
*:一些古老的浏览器是不支持,可以用bind或apply方法来解决
 
eg:
setTimeout(function(a,b){
  console.log(a+b);
}.bind(this,4,5),1000)
 
*:第一个参数表示将原函数的this绑定全局作用域,第二个参数开始是要传入原函数的参数
*:当调用绑定函数时,绑定函数会以创建它时传入bind()方法的第一个参数作为 this
 
三、setTimeout()中回调函数中的this
eg:
var a=1;
var obj={
  a:2,
  b:function(){
    setTimeout(function(){
      console.log(this.a);
    },2000);
  }
};
obj.b();
 
上面代码输出的是1,而不是2,表示o.b的this所指向的已经不是o,而是全局环境了
可以用bind()来改变这个情况:
 
var a=1;
var obj={
a:2,
b:function(){
setTimeout(function(){
console.log(this.a);
}.bind(this),2000);//注意这行
}
};
obj.b();
四、setTimeout()执行回调间隔时间长度
 
var startTime = new Date();
setTimeout(function () {
console.log(new Date() - startTime);
}, 100);
 
//100+ 取决于后面同步执行的JS需要占用多少时间
 
 
五、setTimeout(func,0)
eg:func1和func2谁会先执行?

function func1(){
console.log(1);
}
function func2(){
console.log(2);
}
setTimeout(function () {
func1();
}, 0)
func2();
setTimeout(function(){
func1()
},0)
setTimeout(function(){
func1();
})

有什么差别?

0秒延迟,此回调将会放到一个能立即执行的时段进行触发。javascript代码大体上是自顶向下的,但中间穿插着有关DOM渲染,事件回应等异步代码,他们将组成一个队列,零秒延迟将会实现插队操作。
不写第二个参数,浏览器自动配置时间,在IE,FireFox中,第一次配可能给个很大的数字,100ms上下,往后会缩小到最小时间间隔,Safari,chrome,opera则多为10ms上下。
 
 
 
六、setTimeout和单线程
首先需要注意javascript是单线程的,特点就是容易出现阻塞。如果一段程序处理时间很长,很容易导致整个页面hold住。什么交互都处理不了怎么办?
setTimeout一个很关键的用法就是分片,如果一段程序过大,我们可以拆分成若干细小的块。
例如上面的情况,我们将那一段复杂的逻辑拆分处理,分片塞入队列。这样即使在复杂程序没有处理完时,
我们操作页面,也是能得到即使响应的。其实就是将交互插入到了复杂程序中执行。
换一种思路,上面就是利用setTimeout实现一种伪多线程的概念
有个函数库Concurrent.Thread.js 就是实现js的多线程的
eg:Concurrent.Thread.create(function(){
for(var i=0; i<100000000; i++){
console.log(i);
}
}) $('#test').click(function(){
alert(1);
});
虽然有个巨大的循环,但是这时不妨碍你去触发alert();
当我们需要渲染一个很复杂的DOM时,例如table组件,复杂的构图等等,
假如整个过程需要3s,我们是等待完全处理完成在呈现,还是使用一个setTimeout分片,
将内容一片一片的断续呈现。
其实setTimeout给了我们很多优化交互的空间。
 
 
七、如何使用
setTimeout这么厉害,那么我们是需要在在项目中大量使用吗?
我这边的观点是非常不建议,在我们业务中,基本上是禁止在业务逻辑中使用setTimeout的
例如,当一个实例还没有初始化的前,我们就使用这个实例,错误的解决办法是使用实例时加个setTimeout,确保实例先初始化。
为什么错误?这里其实就是使用hack的手段
第一是埋下了坑,打乱模块的生命周期
第二是出现问题时,setTimeout其实是很难调试的。
综上,setTimeout其实想用好还是很困难的,时间的不确定性,排队运算混乱, 他更多的出现是在框架和类库中,例如一些实现Promis的框架,就用上了setTimeout去实现异步。

setTimeout详解的更多相关文章

  1. JS中的window.setTimeout()详解

    相关用法: setTimeout (表达式,延时时间)setInterval (表达式,交互时间)其中延时时间/交互时间是以豪秒为单位的(1000ms=1s) setTimeout 在执行时,是在载入 ...

  2. setInterval setTimeout 详解

    JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( ...

  3. 关于setTimeout()你所不知道的地方,详解setTimeout()

    关于setTimeout()你所不知道的地方,详解setTimeout() 前言:看了这篇文章,1.注意setTimeout引用的是全部变量还是局部变量了,当直接调用外部函数方法时,实际上函数内部的变 ...

  4. Node.js npm 详解

    一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...

  5. JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】

    正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...

  6. Window 对象详解 转自 http://blog.csdn.net/jcx5083761/article/details/41243697

    详解HTML中的window对象和document对象 标签: HTMLwindowdocument 2014-11-18 11:03 5884人阅读 评论(0) 收藏 举报 分类: HTML& ...

  7. JS中this关键字详解

    本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 阅读此文章,还需要心平气和的阅读完,相信一定会有所收获,我也会不定期的发布,分享一些文章,共同学习 首先,必须搞清楚在JS里面,函数 ...

  8. JS魔法堂:LINK元素深入详解

    一.前言 我们一般使用方式为 <link type="text/css" rel="stylesheet" href="text.css&quo ...

  9. HTML滚动字幕代码参数详解及Js间隔滚动代码

    html文字滚动代码 <marquee style="WIDTH: 388px; HEIGHT: 200px" scrollamount="2" dire ...

随机推荐

  1. centos7-根据端口号查看所属应用

    [root@cent7-zuoys ~]# netstat -lnp | grep 8080 [root@cent7-zuoys ~]# ps 4735

  2. Tiles框架入门教程

    1.为何选用Tiles 刚接触Java Web开发的人都知道,JSP中可以通过include标签动态插入一个JSP页面.在了解这个功能后可能会兴奋不已,因为这样可以实现多个JSP页面共用一个JSP的内 ...

  3. python迭代器、生成器、列表推倒式

    创建迭代器: iter( ): 创建迭代器 next( ): 返回迭代器的下一个element(元素) 实例题: >>> list = [1,2,3,4] >>> ...

  4. HBase学习(二)

    HBase安装说明: HBase下载地址: http://archive.apache.org/dist/hbase/ 更新比较多的版本是比较稳定,使用周期比较长的版本 HBase表操作命令:http ...

  5. Mac 终端执行sql命令

    https://www.cnblogs.com/sbj-dawn/p/6905930.html. 远程登录MYSQL数据库 > mysql -u username -p -h hostname ...

  6. inventor安装失败怎样卸载安装inventor 2019?

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  7. maya2018无法安装卸载激活失败

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  8. AndroidStudio项目提交到github最详细步骤

    在使用studio开发的项目过程中有时候我们想将项目发布到github上,以前都是用一种比较麻烦的方式(cmd)进行提交,最近发现studio其实是自带这种功能的,终于可以摆脱命令行了. 因为自己也没 ...

  9. Sqlite操作的一些关键类的官方说明与Intent的startactivityforresult方法

    Intent: 该功能可以用于通过intent来跳转界面时候传递信号给原理的页面,以便做出一些处理: sqlite的使用: 该方法得到的sqlitedatabase可读可写,而getreadabled ...

  10. PyCharm5 破解汉化

    作者博文地址:https://www.cnblogs.com/liu-shuai/ 破解: 将下列序列号复制到软件激活界面即可破解. 43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0 ...