javascript真的是异步的吗?且看setTimeout的实现原理以及setTimeout(0)的使用场景
来源:互联网 发布:ubuntu浏览器不能上网 编辑:程序博客网 时间:2024/05/16 02:12
在今天之前我一直以为setTimeout这个函数是异步的,无意中看到了一篇关于setTimeout的文章,发现自己以前的认识全是错误的,赶紧总结下。
先看一段代码:
运行这段脚本可以看到:Time elapsed的值大概在1001ms左右,肯定会超过1000ms。也就是说:setTimeout失效了,指定的函数并没有在500ms后执行,而是延迟到1000ms后才执行。
再看一段代码:
运行这段脚本可以看到:先打印2后打印1,我们在setTimeout里面指定了0ms,希望能立即执行,但是实际上没有效果。
想要理解上面的2段代码,我们得了解一下javascript中setTimeout的实现原理。首先牢记一点:JavaScript 是单线程执行的,也就是无法同时执行多段代码。下面这段解释来自这篇博客:
JavaScript是单线程执行的,无法同时执行多段代码。当某一段代码正在执行的时候,所有后续的任务都必须等待,形成一个队列。一旦当前任务执行完毕,再从队列中取出下一个任务,这也常被称为 “阻塞式执行”。所以一次鼠标点击,或是计时器到达时间点,或是Ajax请求完成触发了回调函数,这些事件处理程序或回调函数都不会立即运行,而是立即排队,一旦线程有空闲就执行。假如当前 JavaScript线程正在执行一段很耗时的代码,此时发生了一次鼠标点击,那么事件处理程序就被阻塞,用户也无法立即看到反馈,事件处理程序会被放入任务队列,直到前面的代码结束以后才会开始执行。如果代码中设定了一个 setTimeout,那么浏览器便会在合适的时间,将代码插入任务队列,如果这个时间设为 0,就代表立即插入队列,但不是立即执行,仍然要等待前面代码执行完毕。所以 setTimeout 并不能保证执行的时间,是否及时执行取决于 JavaScript 线程是拥挤还是空闲。
也就是说setTimeout只能保证在指定的时间过后将任务(需要执行的函数)插入队列等候,并不保证这个任务在什么时候执行。执行javascript的线程会在空闲的时候,自行从队列中取出任务然后执行它。javascript通过这种队列机制,给我们制造一个异步执行的假象。
我们之所以会感觉到这段代码是在异步执行,这是因为javascript线程并没有因为什么耗时操作而阻塞,所以可以很快地取出排队队列中的任务然后执行它。
现在我们知道了setTimeout的原理了,现在看下setTimeout(0)的使用场景。下面这个例子来自这篇文章。
这里绑定了 keydown 事件,意图是当用户在文本框里输入字符时,将输入的内容实时地在 <div> 中显示出来。但是实际效果并非如此,可以发现,每按下一个字符时,<div> 中只能显示出之前的内容,无法得到当前的字符。这段代码使用了setTimeout(0)就可以实现需要的效果了。这里其实涉及2个任务,1个是将键盘输入的字符回写到输入框中,一个是获取文本框的值将其写入div中。第一个是浏览器自身的默认行为,一个是我们自己编写的代码。很显然,必须要先让浏览器将字符回写到文本框,然后我们才能获取其内容写到div中。改变顺序,这这正是setTimeout(0)的作
- javascript真的是异步的吗?且看setTimeout的实现原理以及setTimeout(0)的使用场景
- javascript真的是异步的吗?且看setTimeout的实现原理以及setTimeout(0)的使用场景
- JavaScript setTimeout 的原理
- javascript的settimeout和异步
- setTimeout的异步以及js是单线程问题
- setTimeout的异步
- javascript setTimeout方法的使用
- 你真的知道setTimeout是如何运行的吗?
- 重新认识javascript的settimeout和异步
- 重新认识javascript的settimeout和异步
- setTimeout的工作原理
- setTimeout的工作原理
- javascript的settimeout
- Javascript setTimeout的用法
- JavaScript中setTimeout()和setInterval()的使用以及区别
- js的setTimeout异步机制
- 对setTimeout异步的理解
- setTimeout的“异步”,执行顺序
- Oracle Form 问题集锦 - 加弹性域后查询报错的解决
- Java面向对象编程(3)--抽象类,接口,final
- PHPmailer发送邮件成功,对方收不到邮件
- HDU5444——Elven Postman(2015年长春区域赛)
- Leetcode (287) Find the Duplicate Number
- javascript真的是异步的吗?且看setTimeout的实现原理以及setTimeout(0)的使用场景
- Unix Domain Socket – IPC通信机制
- java值传递和引用传递
- hdu 4118 Holiday's Accommodation 思维+树形dp
- 32单片机
- Android自定义控件实战——下拉刷新控件终结者:PullToRefreshLayout
- Python os 模块介绍
- UART0串口编程系列之前奏篇
- Java异常机制