宿迁掼蛋里的setTimeout是如何巧妙使用的

素颜马尾好姑娘i 2022-08-07 04:56 105阅读 0赞

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

本文内容如下：  
•起因

•单线程的JavaScript

•setTimeout背后意味着什么

•参考和引用

[**宿迁掼蛋**][Link 1] 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>

<h2>2、使用 <code>setTimeout</code></h2>  
    <button id="makeinput2">生成 input</button>  
    <p id="inpwrapper2"></p>

<h2>3、另一个例子</h2>  
    <p>  
        <input type="text" id="input" value="" /><span id="preview"></span>  
    </p>  
</body>  
</html>

[Link 1]: http://vdisk.weibo.com/s/FuhRYFUVntq4S