宿迁掼蛋里的setTimeout是如何巧妙使用的_宿迁掼蛋关闭之后总是显示网页-CSDN博客

本文链接：https://blog.csdn.net/mynote/article/details/44232209

近期在研究异步编程的我对于setTimeout之类的东西异常敏感。在SegmentFault上看到了一个问题《关于SetTimeout时间设为0时》：提问者读了一篇文章，原文解释setTimeout延迟时间为0时会发生的事情，提问者提出了几个文章中的几个疑点。读了那篇文章之后发现原文的作者对于setTimeout的理解和自己的认知有点出入，于是编写了相关测试的代码以求答案。最终编写了这篇文章。 setTimeout是如何巧妙使用的！

本文内容如下：
•起因

•单线程的JavaScript

•setTimeout背后意味着什么

•参考和引用

宿迁掼蛋 http://vdisk.weibo.com/s/FuhRYFUVntq4S
JavaScript - 前端开发交流群：377786580

起因

上午在SegmentFault上看到了这个问题《关于SetTimeout 时间设为0时》（注：SegmentFault正在调整备案，如不能访问，请点击这里），原提问者注明了问题来源：《JS setTimeout延迟时间为0的详解》。这个问题来源也是转载的，我后来找到了出处。
在问题来源的那篇的文章中（后者），讲述了JS是单线程引擎：它把任务放到队列中，不会同步去执行，必须在完成一个任务后才开始另外一个任务。
而后，转载的那篇文章列出并补充了原文的栗子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>setTimeout</title>
    <script type="text/javascript">
        function get(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            //第一个例子：未使用setTimeout
            get('makeinput').onmousedown = function () {
                var input = document.createElement('input');
                input.setAttribute('type', 'text');
                input.setAttribute('value', 'test1');
                get('inpwrapper').appendChild(input);
                input.focus();
                input.select();
            }
            //第二个例子：使用setTimeout
            get('makeinput2').onmousedown = function () {
                var input = document.createElement('input');
                input.setAttribute('type', 'text');
                input.setAttribute('value', 'test1');
                get('inpwrapper2').appendChild(input);
                //setTimeout
                setTimeout(function () {
                    input.focus();
                    input.select();
                }, 0);
            }
            //第三个例子，onkeypress输入的时候少了一个值
            get('input').onkeypress = function () {
                get('preview').innerHTML = this.value;
            }
        }
    </script>
</head>
<body>
    <h1><code>setTimeout</code></h1>
    <h2>1、未使用 <code>setTimeout</code></h2>
    <button id="makeinput">生成 input</button>
    <p id="inpwrapper"></p>