最近在工作中遇到一些问题，大致是关于js执行问题的。由于没搞清执行顺序，导致出现了一些奇怪的bug。 所以这里整理一些有关异步执行的知识（冰山一角角）...

　　大家都知道js是单线程的，执行起来是顺序的，在顺序的业务逻辑中当然没有问题。如果遇到可以并发执行的业务逻辑，再排队就很低级了，所以需要异步执行！

1、什么是异步？

setTimeout(function(){

　　console.log(0);

},0)

console.log(1);

// 先打印 1

// 再打印 0

　　比方说有些饭店你去吃饭需要提前预定（异步代码执行），等其他人吃完（同步代码执行完毕）你才能去，因此在其他人吃饭的时候（同步代码执行中）你可以去干其他的事情，等其他人吃完了（同步代码执行完毕）会有人来通知你，于是你可以去了（开始执行异步代码【setTimeout/setInterval/事件处理程序/ajax回调...】的执行）。

　　我们回到前面那段setTimeout身上，它的工作原理是这样的，当你定义setTimeout那一刻起（不管时间是不是0），js并不会直接去执行这段代码，而是把它扔到一个事件队列里面，当页面中所有同步任务都干完了以后，才会去执行事件队列里面的代码。什么是同步，按代码顺序执行，就像音乐播放器里的顺序播放。

 2、setTimeout 0的妙用

<!DOCTYPE html>

<html>

  <head>

    <title> </title>

    <meta charset="utf-8">

  </head>

  <body>

  <p>

    <input type="text" id="input" value=""/>

    <span id="preview"></span>

  </p>

  </body>

<script type="text/javascript">

(function(){

  function $(id){

    return document.getElementById(id);

  }

  $('input').onkeypress = function(){

    $('preview').innerHTML = this.value;

  }

})();

</script>

</html>

　　这个keypress函数原意是监听到用户输入字符串就将其完整的显示出来，但是奇怪的是最后一个字符串总是没能显示出来:

　　

　　重点来了，使用setTimeout 0来解决：

 $('input').onkeypress = function(){

      setTimeout(function(){ $('preview').innerHTML = $('input').value;},0);

  }

　　好的，问题就这样解决了，首先回过头来看看问题是如何产生的？

　　代码中，我们用到的事件是keypress，而keypress事件发生时，dom元素的状态还未改变，keypress事件之后dom元素的状态才发生改变，通过setTimeout 0延迟执行就能达到期望的结果了。当然，不用setTImeout 0 ，直接用onkeyup亦可。

　　但是setTimeout有些小小的问题，就是时间不精确：

<!DOCTYPE html>

<html>

  <head>

    <meta name="generator" content="">

    <title></title>

    <meta charset="utf-8">

  </head>

  <body>

    <h2>未使用 <code>setTimeout</code></h2>

    <button id="makeinput">生成 input</button>

    <p id="inpwrapper"></p>

  </body>

<script type="text/javascript">

(function(){

  function get(id){

    return document.getElementById(id);

  }

  function log(a){

    console.log(a)

  }

  window.onload = function(){

    get('makeinput').onmousedown=function(){

      var input = document.createElement('input');

      input.setAttribute('type', 'text');

      input.setAttribute('value', 'test1');

      get('inpwrapper').appendChild(input);

      input.onfocus=function(){    //给生成的input绑定focus事件

         log("iptFocus");

      }

      input.focus();

      log("down");

    }

    get('makeinput').onfocus = function(){

      log("btnFocus");

    }

    get('makeinput').onclick = function(){

     log("click");

    }

    get('makeinput').onmouseup=function(){

      log("up");

    }

   }

})();

</script>

</html>

// 打印 iptFocus

// 打印 down

// 打印 btnFocus 导致新增的input无焦点的真凶

// 打印 up

// 打印 click

　　将 input.focus(); 改为 setTimeout(function(){input.focus();},0);得到结果为：

// 打印 down

// 打印 btnFocus

// 打印 iptFocus  鬼知道为什么会跑到这执行

// 打印 up

// 打印 click

　　

　　理解了js的异步执行和setTImeout 0的工作原理，能更好的方便我们解决工作中的bug...

JS异步执行之setTimeout 0的妙用的更多相关文章

  1. 浅析JS异步执行机制

    前言 JS异步执行机制具有非常重要的地位,尤其体现在回调函数和事件等方面.本文将针对JS异步执行机制进行一个简单的分析. 从一份代码讲起 下面是两个经典的JS定时执行函数,这两个函数的区别相信对JS有 ...

  2. js 异步执行顺序

    参考文章: js 异步执行顺序   1.js的执行顺序,先同步后异步 2.异步中任务队列的执行顺序: 先微任务microtask队列,再宏任务macrotask队列 3.调用Promise 中的res ...

  3. js异步执行 按需加载 三种方式

    js异步执行 按需加载 三种方式 第一种:函数引用 将所需加载方法放在匿名函数中传入 //第一种 函数引用 function loadScript(url,callback){ //创建一个js va ...

  4. js异步执行原理

    我们都知道js是一个单线程的语言,所以没办法同时执行俩个进程.所以我们就会用到异步. 异步的形式有哪些那,es5的回调函数.es6的promis等 异步的运行原理我们可以先看下面这段代码 应该很多人都 ...

  5. 从一到面试题了解js异步机制：setTimeout 和 Pronmise

    1.毫无疑问setTimeout是最晚输出的 2.请无视undefined,这是浏览器的返回值. 3.new Promise中并不是异步,而.then()后才是异步.

  6. 异步执行js脚本——防止阻塞

    JS允许我们修改页面中的所有方面:内容,样式和用户进行交互时的行为. 但是js同样可以阻塞DOM树的形成并且延迟页面的渲染. 让你的js变成异步执行,并且减少不必要的js文件从而提高性能. JavaS ...

  7. 【JS】js引擎执行过程

    概述 js引擎执行过程主要分为三个阶段,分别是语法分析,预编译和执行阶段,上篇文章我们介绍了语法分析和预编译阶段,那么我们先做个简单概括,如下: 语法分析: 分别对加载完成的代码块进行语法检验,语法正 ...

  8. js异步队列之理解

    起因 最近看到一篇关于js异步执行顺序的解答,觉得有所收获,遂记录下来. marcotask和microtask js中异步队列可以分为两类,marcotask队列和microtask队列, marc ...

  9. js的事件循环机制：同步与异步任务（setTimeout，setInterval）宏任务，微任务（Promise，process.nextTick）

    javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环 ...

随机推荐

  1. 快速下载android源码

    众所周知的原因,android源码被墙了,还好国内有不少镜像,这里使用清华提供的镜像. 以下内容转自: https://wiki.tuna.tsinghua.edu.cn/MirrorUsage/an ...

  2. c# 两个字符串，s="aeiou",s2="welcome to Quantum Asia"

    c#  两个字符串,s="aeiou",s2="welcome to Quantum Asia" 方案一: 使用while循环: static void Mai ...

  3. luoguP2418 yyy loves OI IV

    https://www.luogu.org/problemnew/show/P2418 暴力 DP 做这题只有 30 分 考虑用线段树优化这个 DP 先处理一下整个房间都膜拜一个人的情况,然后将 1 ...

  4. [译文]Casperjs1.1.0参考文档-安装

    安装 Casperjs能被安装在mac osx,windows 和大多数linux版本 依赖项 PhantomJS1.82及以上 Python2.6及以上(很多人忘了安装python导致安装失败) 1 ...

  5. django部署ubuntu数据库MYSQL时区问题

    SELECT * FROM mysql.time_zone; SELECT * FROM mysql.time_zone_name; mysql_tzinfo_to_sql /usr/share/zo ...

  6. JDBC_时间处理_Date_Time_Timestamp区别_随机日期生成

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement;import ...

  7. 【python跨目录调用】结合自己遇到的问题到解决问题，作个记录

    写PO的时候,想把page和case 文件分开存不同的文件夹,但是在调用模块的时候就出现了问题.后来终于解决了,记录下 ---------------------------------------- ...

  8. 使用TortoiseSVN新建及合并分支图文教程

    打开trunks目录,在trunks目录下新建两个文本文件A.java,B.java:   打开A.java输入以下内容: B.java文件可以随机输入些,本例中主要用于观察后续是否变化. 两个文件编 ...

  9. α测试，Beta测试

    α测试(内测)是由一个用户在开发环境下进行的测试,也可以是公司内部的用户在模拟实际操作环境下进行的测试.α测试的目的是评价软件产品的FLURPS(即功能.局域化.可使用性.可靠性.性能和支持).尤其注 ...

  10. C++_函数3-引用变量与函数的默认参数

    引用变量 C++新增了一种复合类型——引用变量. 引用是已定义的变量的别名.例如将twain作为clement变量的引用,则可以交替使用twain和clement来表示该变量. 引用变量的主要用途:用 ...