setTimeout详解

https://www.cnblogs.com/wzndkj/p/7069331.html

一、setTimeout基础

setTimeout(func|code,delay);

第一个参数表示将要推迟的函数名或者一段代码，第二个参数表示推迟执行的毫秒数

eg:
console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);answer:
1
3
2

＊：推迟的代码必须以字符串的形式，因为引擎内部使用eval()函数，将字符串转为代码。

＊：如果推迟执行的是函数，则可以直接将函数名，放入setTimeout()

eg:
function func(){console.log(2);
}
setTimeout(func,5000);
//或者
setTimeout(function(){console.log(2);
},1000)

*:如果写成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去实现异步。

转载于:https://www.cnblogs.com/beimingbingpo/p/8532023.html

setTimeout详解相关推荐

setTimeout 详解
1. setTimeout 定义 setTimeout( )是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指 ...
关于 JS 的脚本执行及 SetTimeOut延迟时间为0的详解
关于 JS 的脚本执行及 SetTimeOut延迟时间为0的详解大海和星辰之间,是我们征途的方向: js是一种描述型的语言,由浏览器动态的解析与执行:严格来讲,js是单线程执行的,也就是说js脚本运 ...
【ES6】Promise对象详解
[ES6]Promise对象详解一.Promise对象的含义二.Promise对象的用法三.Promise对象的几个应用[重点] 1.时间延迟函数 2.图片异步加载查看更多ES6教学文章: 参 ...
【ES6】Generator函数详解
[ES6]Generator函数详解一.Generator函数简介基本概念函数写法 yield关键字介绍二.next方法的参数三.for...of循环四.关于普通throw()与Gener ...
cpu多核 node 单线程_详解node单线程实现高并发原理与node异步I/O
一.node单线程实现高并发原理众所周知nodejs是单线程且支持高并发的脚本语言.可为什么单线程的nodejs可以支持高并发呢?很多人都不明白其原理,下面我来谈谈我的理解: 1. node的优点: ...
php引入路径配置,require.js的路径配置和css的引入方法详解
这篇文章主要介绍了详解require.js配置路径的用法和css的引入,具有一定的参考价值,感兴趣的小伙伴们可以参考一下前端开发在近一两年发展的非常快,JavaScript作为主流的开发语言得到了前 ...
Window_Open详解
原文 http://www.cnblogs.com/stswordman/archive/2006/06/02/415853.html 引:Window_Open详解一.window.open( ...
深入剖析Redis系列(三) - Redis集群模式搭建与原理详解
前言在 Redis 3.0 之前,使用哨兵(sentinel)机制来监控各个节点之间的状态.Redis Cluster 是 Redis 的分布式解决方案,在 3.0 版本正式推出,有效地解决了 ...
javascript BOM对象详解
javascript BOM对象详解目标:本章节将分为9点详细介绍有关BOM对象的知识点 1.什么是BOM 2.BOM的构成 3.顶级对象window 4.window对象常见事件(页面加载事件和体 ...

setTimeout详解

setTimeout详解相关推荐

最新文章

热门文章