关于setTimeout
这是一个延时函数,例如
console.log(1);
setTimeout(function() {
console.log(2);
}, 1000);
console.log(3);
这段代码打印出的是1 3 2
,很明显, 打印2
是延迟了一秒后执行的,所以结果可想而知。但是如果是下面的这段代码呢?
console.log(1);
setTimeout(function() {
console.log(2);
}, 0);
console.log(3);
结果很奇怪的发现,打印的结果还是1 3 2
,但是设置的延时确是0,为什么还是在最后才执行呢?
这是由于使用setTimeout
设置的任务,js引擎会将该任务放到任务队列的末尾,所以依然是最后打印出了,那么可以说使用setTimeout
可以改变代码的执行顺序。
例如如下示例
var a;
setTimeout(function() {
console.log(a)
}, 0)
a = 10;
最终会打印出结果10
,同理,使用对象的实例化操作时,也可以使用setTimeout
,确保对象肯定被实例化。
延时函数还有其他的用法,比如用于监听页面滚动的事件处理上。使用window.onscroll
监听滚动时,只要稍微滚动一小部分,可能就会触发上百次这个滚动事件,十分影响页面性能,在这里可以使用这个延时函数来解决事件频繁触发的问题。
var clock,
standard = document.compatMode === 'CSS1Compat' ? true : false;
window.onscroll = function() {
if(clock) clearTimeout(clock);
clock = setTimeout(function() {
if((standard ? document.documentElement: document.body).scrollTop > 100) console.log('show')
}, 100)
}
如果您觉得本文对您有用,欢迎捐赠或留言~
- 本博客所有文章除特别声明外,均可转载和分享,转载请注明出处!
- 本文地址:https://www.leevii.com/?p=980