美文网首页
settimeout的时间定为为0有什么用

settimeout的时间定为为0有什么用

作者: 西瓜炒苦瓜 | 来源:发表于2017-06-13 23:09 被阅读124次

    1.JavaScript中的setTimeout()可用来延迟执行一段代码,如:

    setTimeout(function() {

            alert("Hello World");

    }, 1000)//延时1秒

    2.今天在网上看到了setTimeout(fn, 0)的用法,感到有些疑惑,不明白它和直接执行fn()有什么区别,遂去搜集了一下相关的资料,顺便分享分享。

    functiona() {

           setTimeout(function(){

            alert(1)

    }, 0);

    alert(2);

    }

    a();

    代码中的setTimeout设为 0,也就是延迟 0ms,看上去是不做任何延迟立刻执行,即依次弹出 “1”、“2”。但实际的执行结果确是 “2”、“1”。其中的原因得从setTimeout的原理说起:

    javascript是单线程执行的,也就是无法同时执行多段代码,当某一段代码正在执行的时候,所有后续的任务都必须等待,形成一个队列,一旦当前任务执行完毕,再从队列中取出下一个任务。这也常被称为 “阻塞式执行”。所以一次鼠标点击,或是计时器到达时间点,或是 Ajax 请求完成触发了回调函数,这些事件处理程序或回调函数都不会立即运行,而是立即排队,一旦线程有空闲就执行。假如当前 JavaScript 进程正在执行一段很耗时的代码,此时发生了一次鼠标点击,那么事件处理程序就被阻塞,用户也无法立即看到反馈,事件处理程序会被放入任务队列,直到前面的代码结束以后才会开始执行。如果代码中设定了一个setTimeout,那么浏览器便会在合适的时间,将代码插入任务队列,如果这个时间设为 0,就代表立即插入队列,但不是立即执行,仍然要等待前面代码执行完毕。所以setTimeout并不能保证执行的时间,是否及时执行取决于 JavaScript 线程是拥挤还是空闲。

    3.至于这样的写法有什么作用,看下面的例子。

    <input type="text" onkeydown="show(this.value)">

    <div></div>

    <script>

    function show(val) {

              document.getElementsByTagName('div')[0].innerHTML = val;

    }

    </script>

    这里绑定了keydown事件,意图是当用户在文本框里输入字符时,将输入的内容实时地在

    中显示出来。但是实际效果并非如此

    可以发现,每按下一个字符时,

    中只能显示出之前的内容,无法得到当前的字符。这时就可以利用setTimeout(0):

    原因是,当用户按下按键的时候,JavaScript 引擎需要执行keydown的事件处理程序,然后更新文本框的value值,这两件事也需要按顺序来,事件处理程序执行时,更新value值的任务则进入队列等待。所以我们在keydown的事件处理程序里是无法得到更新后的value的,利用setTimeout,我们把取value的操作放入队列,放在更新value值以后,这样便达到了目的。示例如下,可以发现已经能够实时显示输入的内容。

    有人可能会想到利用绑定keyup事件来解决,但是onkeyup有一个问题,就是当一直按着某个键不放时,也会无法得到输入内容,因为此时不断地触发keydown和keypress,直到用户松起时才会触发keyup。当然,示例所用的keydown也存在一些小缺点,比如用户如果使用右键粘贴,则无法得到粘贴的内容。

    所以最理想的方案应该是使用HTML5的input事件,当文本框或textarea的value发生变化时,就会触发此事件,对粘贴也可以很好地兼容。至于 IE9 之前的浏览器,需要使用专有的onpropertychange事件。

    settimeout(0)就起到了一个将事件加入到队列中,待执行的一个功能效果!

    相关文章

      网友评论

          本文标题:settimeout的时间定为为0有什么用

          本文链接:https://www.haomeiwen.com/subject/qipjqxtx.html