理解setTimeout()

setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。
setTimeout函数接受两个参数，第一个参数func|code是将要推迟执行的函数名或者一段代码，第二个参数delay是推迟执行的毫秒数。
注意：如果回调函数是对象的方法，那么setTimeout使得方法内部的this关键字指向全局环境，而不是定义时所在的那个对象。

 var x = 1;var obj = {x:2,y:function(){console.log(this.x);}}setTimeout(obj.y,1000);  // 1

setTimeout的作用是将代码推迟到指定时间执行，如果指定时间为0，即setTimeout(f, 0)，那么会立刻执行吗？
答案是不会。因为必须要等到当前脚本的同步任务，全部处理完以后，才会执行setTimeout指定的回调函数f。也就是说，setTimeout(f, 0)会在下一轮事件循环一开始就执行。

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

setTimeout(f, 0)应用
1、它的一大应用是，可以调整事件的发生顺序。
比如，网页开发中，某个事件先发生在子元素，然后冒泡到父元素，即子元素的事件回调函数，会早于父元素的事件回调函数触发。如果，想让父元素的事件回调函数先发生，就要用到setTimeout(f, 0)。

// HTML 代码如下
// <input type="button" id="myButton" value="click">var input = document.getElementById('myButton');input.onclick = function A() {setTimeout(function B() {input.value +=' input';}, 0)
};document.body.onclick = function C() {input.value += ' body'
};

上面代码在点击按钮后，先触发回调函数A，然后触发函数C。函数A中，setTimeout将函数B推迟到下一轮事件循环执行，这样就起到了，先触发父元素的回调函数C的目的了。
2、另一个应用是，用户自定义的回调函数，通常在浏览器的默认动作之前触发。比如，用户在输入框输入文本，keypress事件会在浏览器接收文本之前触发。因此，下面的回调函数是达不到目的的。

// HTML 代码如下
// <input type="text" id="input-box">document.getElementById('input-box').onkeypress = function (event) {this.value = this.value.toUpperCase();console.log(this.value);
}

代码执行效果：

上面代码想在用户每次输入文本后，立即将字符转为大写。但是实际上，它只能将本次输入前的字符转为大写，因为浏览器此时还没接收到新的文本，所以this.value取不到最新输入的那个字符。只有用setTimeout改写，上面的代码才能发挥作用。

 document.getElementById('input-box').onkeypress = function (event) {var self = this;console.log('self',self);setTimeout(function(){self.value = self.value.toUpperCase();console.log(this);},0)}

上面代码将代码放入setTimeout之中，就能使得它在浏览器接收到文本之后触发。

理解setTimeout()相关推荐

彻底理解setTimeout()
之前在网上看了很多关于setTimeout的文章,但我感觉都只是点到为止,并没有较深入的去剖析,也可能是我脑袋瓜笨,不容易被点解.后面看了<你不知道的javascript-上卷>一书,决定 ...
setTimeout那些事儿
一.setTimeout那些事儿之单线程一直以来,大家都在说Javascript是单线程,浏览器无论在什么时候,都且只有一个线程在运行JavaScript程序. 但是,不知道大家有疑问没--就是我们 ...
setTimeout(function(){}, 0);
1 for (var i = 0; i < 3; i++) { 2 setTimeout(function() { 3 console.log(i); 4 }, 0); 5 console.lo ...
setTimeout()用法
对于这个知识我一直以来也有一个误解查完之后感觉这个小编写的还可以也转发一下帮助自己理解一下 // 3 秒(3000 毫秒)后弹出 "Hello" setTimeout(fun ...
探索setTimeout
其实说起JavaScript中的定时器(Timer)中的 setTimeout() 方法,从事开发的同学想必都不会陌生,觉得这些东西很简单很基础.但是有时候恰恰是基础简单的东西,才越容易被忽略.先看一 ...
2017-09-29 前端日报
2017-09-29 前端日报精选被誉为神器的requestAnimationFrame 我是怎样让网站用上HTML5 Manifest React 的性能优化(一)当 PureComponent ...
js等待 callback 执行完毕_前端开发，一篇文章让你彻底搞懂，什么是JavaScript执行机制！...
不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序.因为javascript是一门单线程语言,所以我们可 ...
你不懂的JS学习笔记(作用域和闭包)
You don't KnowJS 引语:你不懂的JS这本书github上已经有了7w的star最近也是张野大大给我推荐了一波,阅读过之后感觉对js的基础又有了更好的理解.本来我是从来不这种读书笔记的, ...
这一次，彻底弄懂 JavaScript 执行机制
本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定 ...

理解setTimeout()

理解setTimeout()相关推荐

最新文章

热门文章