js巧用setTimeout实现异步事件
2017-07-14 本文已影响0人
咻咻咻i
setTimeout()本身就是一个异步函数，通过借用它可以实现异步事件处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<title>异步事件</title>
</head>
<body>
<div>
<form action="">
<input type="text"><br>
<input type="text"><br>
<input type="text">
</form>
</div>
<script type="text/javascript">
var input = $('input');
input.blur(()=> {
console.log(input.is(':focus'));
});
</script>
</body>
</html>
在不使用的情况下，当焦点想从一个input移动到另一个input时只会触发blur事件，控制台始终输出false，input.is(':focus')无法正确获得新的焦点。使用setTimeout()后，在移动焦点这时候就可以正常获取新焦点，如下代码。
<script type="text/javascript">
var input = $('input');
input.blur(()=> {
setTimeout(()=>{
console.log(input.is(':focus'));
}, 0);
});
</script>
正常判断达到预期效果~~
半年后解释缘由：
js引擎是单线程的，如何实现的异步？每一个异步事件产生后它会放入事件队列等待处理。何时才会处理它，这是在主线程中的事件被处理完后才会从事件队列中逐个取出进行处理。
在本文操作中，失去焦点事件和点击事件都是同步事件，在执行产生一个失去焦点事件后，如第一段代码所写它会立即执行判断是否存在获取焦点这条语句，然后执行获取焦点语句。但在第二段代码中，由于js的异步原理，它会将这个判断语句放入事件队列中等待处理，然后执行获取焦点事件，在执行这个判断语句，这样就能成功判断到点击的焦点状态。
