`
dcj3sjt126com
  • 浏览: 1878520 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

setTimeout延时0毫秒的作用

阅读更多

经常看到setTimeout延时0ms的javascript代码,感到很迷惑,难道延时0ms和不延时不是一个道理吗?后来通过查资料以及实验得出以下两个作用,可能还有作用我还不知道,希望得知的朋友在后面评论上不吝指出。
1、实现javascript的异步;
正常情况下javascript都是按照顺序执行的。但是我们可能让该语句后面的语句执行完再执行本身,这时就可以用到setTimeout延时0ms来实现了。
如: 
alert(1); 
setTimeout("alert(2)", 0); 
alert(3); 
虽然延时了0ms,但是执行顺序为:1,3,2 
这样就保证setTimeout里面的语句在某一代码段中最后执行。 


2、在事件中,setTimeout 会在其完成当前任何延宕事件的事件处理器的执行,以及完成文档当前状态更新后,告诉浏览器去启用 setTimeout 内注册的函数。
 举个例子来说这句话的意思,假如当某个事件在页面上建立一个文本框,并给文本框赋值(完成文档当前状态更新),然后将焦点定到文本框,并且选中文本框的内容(后面部分就需要用到setTimeout 延迟0ms实现,否则不好实现)。
先看个例子:

复制代码
 1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2<html>
 3<head>
 4<title>setTimeout</title>
 5<script type="text/javascript" >
 6 (function(){
 7  
 8  function get(id){
 9   return document.getElementById(id);
10  }

11  
12  window.onload = function(){
13   get('makeinput').onmousedown = function(){
14    var input = document.createElement('input');
15    input.setAttribute('type''text');
16    input.setAttribute('value''test1');
17    get('inpwrapper').appendChild(input);
18    input.focus();
19    input.select();
20   }

21   get('makeinput2').onmousedown = function(){
22    var input = document.createElement('input');
23    input.setAttribute('type''text');
24    input.setAttribute('value''test1');
25    get('inpwrapper2').appendChild(input);
26    setTimeout(function(){
27     input.focus();
28     input.select();
29    }
0);
30   }

31   get('input1').onkeypress = function(){
32    get('preview1').innerHTML = this.value;
33   }

34   get('input2').onkeypress = function(){
35                                setTimeout(function(){
36    get('preview2').innerHTML = get('input2').value;
37                               }
,0 );
38   }

39  }

40 }
)();
41
</script>
42</head>
43<body>
44 <h1><code>DEMO1</code></h1>
45 <h2>1、未使用 <code>setTimeout</code>(未选中文本框内容)</h2>
46 <button id="makeinput">生成 input</button>
47 <id="inpwrapper"></p>
48 <h2>2、使用 <code>setTimeout</code>(立即选中文本框内容)</h2>
49 <button id="makeinput2">生成 input</button></h2>
50 <id="inpwrapper2"></p>
51
52--------------------------------------------------------------------------
53 <h1><code>DEMO2</code></h1>
54 <h2>1、未使用 <code>setTimeout</code>(只有输入第二个字符时,前一个字符才显示出来)</h2>
55 <input type="text" id="input1" value=""/><div id="preview1"></div>
56 <h2>2、使用 <code>setTimeout</code>(输入时,字符同时显示出来)</h2>
57<input type="text" id="input2" value=""/><div id="preview2"></div>
58</body>
59</html>
60
61
复制代码

 

运行示例
现有的 JavaScript 引擎是单线程处理任务的。它把任务放到队列中,不会同步去执行,必须在完成一个任务后才开始另外一个任务。其实,这是一个把需要执行的任务从队列中跳脱的技巧。在DEMO1中,JavaScript 引擎在执行 onmousedown时,由于没有多线程的同步执行,不可能同时去处理刚创建元素的 focus 和 select 方法,由于这两个方法都不在队列中,在完成 onmousedown 后,JavaScript 引擎已经丢弃了这两个任务,正如第一种情况。而在第二种情况中,由于setTimeout可以把任务从某个队列中跳脱成为新队列,因而能够得到期望的结果。

分享到:
评论

相关推荐

    设置setTimeout延时为0ms的作用

    然而,当我们将`setTimeout`的延时时间设置为0毫秒时,它的作用可能并不像表面上看起来那么简单。在深入解释这个现象之前,我们需要先了解JavaScript的执行环境——单线程和事件循环机制。 JavaScript引擎本质上是...

    js延时函数 JS延时

    在实际应用中,应优先考虑使用`setTimeout()`或`setInterval()`这样的标准API,它们不仅提供了更稳定和高效的延时执行机制,还遵循了JavaScript的异步编程模式,避免了不必要的资源浪费和性能瓶颈。掌握并正确运用...

    setTimeout应用(模拟站长之家导航)

    总结一下,`setTimeout`是JavaScript中用于延迟执行任务的关键工具,它在模拟站长之家导航这类动态效果中发挥着重要作用,可以创建各种动画、延时更新、交互响应等效果。通过巧妙地结合`setTimeout`与其他技术,我们...

    js延时方法

    然而,自定义延时方法能够提供更多的灵活性和控制能力,比如更直观地传入秒数而非毫秒数进行延时,这在某些情况下可以使代码更加易读和维护。 #### 实现细节 以下是一种常见的自定义JavaScript延时方法的实现方式...

    setTimeout的延时为0时多个浏览器的区别

    上述测试结果显示,即使设置延时为0,回调函数的实际执行时间在不同浏览器中有所差异,通常在1到20毫秒之间。这表明浏览器在处理事件队列的优先级和调度上有自己的策略。例如,IE浏览器在直接执行脚本和响应用户...

    Javascript定时器(二)——setTimeout与setInterval

    首先,`setTimeout`函数用于在指定的毫秒数后调用一个函数或执行一段代码。它的基本语法是: ```javascript setTimeout(function, delay, param1, param2, ...); ``` 这里的`function`是要执行的函数,`delay`是...

    商业编程-源码-这是一个产生产生毫秒级时钟延时的程序.zip

    在编程领域,毫秒级时钟延时是一个常见的需求,特别是在需要精确控制程序执行流程或者进行性能测试的场景。这个“商业编程-源码-这是一个产生产生毫秒级时钟延时的程序”可能包含了实现这一功能的源代码。在不同的...

    JavaScript中setTimeout的那些事儿

    1. 实现延时操作:开发者可以利用setTimeout进行延时处理,比如表单验证、页面加载中的提示等。 2. 防抖和节流:利用setTimeout实现防抖(debounce)和节流(throttle)可以优化性能,减少资源消耗。 3. 倒计时和...

    JS中setTimeout和setInterval的最大延时值详解

    当使用setTimeout或setInterval设置延时时,如果提供的毫秒数超出了这个范围,它们就会出现一些不可预测的行为。 具体来说,setTimeout和setInterval可以接受的最大延时值是2^31-1毫秒,换算成时间则是大约24.8天。...

    JS中setTimeout()的用法详解

    第二个参数是延迟时间,单位是毫秒(1秒=1000毫秒)。在设定时间到达之后,浏览器会执行第一个参数中指定的函数或代码。 ```javascript // 使用字符串执行代码 setTimeout("alert('Hello, world!')", 3000); // ...

    javascript延时执行跳转或执行函数

    这种功能通常通过延时执行来实现,其中最常用的工具就是`setTimeout`函数。在这个场景中,"javascript延时执行跳转或执行函数"涉及到的技术点主要包括`setTimeout`、`window.location`对象以及回调函数(callback)...

    解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)

    当setTimeout的第二个参数小于60毫秒时,Vue可能将这两个类的添加视为同时发生,从而失去了过渡动画。 解决这个问题的关键在于理解Vue的渲染流程,并确保setTimeout的间隔足够让Vue完成每次状态更新的渲染。对于...

    js延时菜单

    timer = setTimeout(() =&gt; { delayMenu.style.display = 'block'; // 显示菜单 }, 500); // 延迟500毫秒 }); // 鼠标离开事件 menuTrigger.addEventListener('mouseout', () =&gt; { clearTimeout(timer); // 清除...

    js中settimeout方法加参数的使用实例.docx

    总结一下,`setTimeout`在JavaScript中用于延时执行任务,可以通过匿名函数或箭头函数来传递参数。当多个`setTimeout`涉及到共享变量时,需要注意作用域和闭包的影响,以确保每个定时器都能正确地获取其需要的参数。...

    微信小程序—setTimeOut定时器的问题及解决

    这里的`function()`是需要定时执行的代码,`delay`则是延迟执行的时间,以毫秒为单位。例如,延迟5秒执行,`delay`应设置为`5 * 1000`。`timerName`是返回的定时器标识,可用于清除定时器,即`clearTimeout...

    JS中的setTimeout和setInterval的区别JS中的setTimeout和setInterval的区别

    `setTimeout`函数允许我们设置一个延时,在指定的毫秒数之后只执行一次回调函数。其基本语法结构如下: ```javascript setTimeout(callback, delay, [param1, param2, ...]); ``` - **callback**: 指定要在延迟...

    Javascript中setTimeOut和setInterval的定时器用法

    Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等等。但它们的应用是有区别的。 ...

    jQuery hover 延时器

    这个插件使用了`setTimeout`来实现延迟执行,并通过`clearTimeout`在必要的时候取消已设置的延时任务。`self.data('delayTimer')`用来存储定时器ID,以便在需要时清除。 `jQuery.mouseDelay.min.js`和`jQuery....

    javascript实现延时显示提示框特效代码_.docx

    在JavaScript中,我们可以使用`setTimeout`函数来实现延时执行特定操作,比如延迟显示提示框或者控制其他UI元素的动态效果。在这个实例中,我们将探讨如何创建一个延时显示提示框的特效,这个特效不仅限于警告框,还...

Global site tag (gtag.js) - Google Analytics