注册本站  论坛  繁體中文

电脑技巧
手机 | MP3 | MP4 | 显卡 | 主板 | 显示器 | 光存储 | 笔记本 | 网络设备 | 移动存储 | 数码相机
键鼠 | CPU | 音箱 | GPS | 电视 | 服务器 | 投影机 | 机箱电源 | 品牌电脑 | 办公打印 |
| 网站首页 | Cisco | Windows | Linux | Java | Dotnet | Oracle | 网页设计 | 平面设计 | 安全 | 软件应用 | 电脑维修 | 办公维修 |
您现在的位置: 电脑技巧 >> 网页设计 >> Javascript >> 网页设计正文

延迟事件为0的setTimeout的真正目的

文章来源:Realazy Realazy 作者:佚名 更新时间:2008-4-24 13:06:52 【 】 【加入收藏

由 John Resig 的 How JavaScript Timers Work 可以知道,现有的 JavaScript 引擎是单线程处理任务的。它把任务放到队列中,不会同步去执行,必须在完成一个任务后才开始另外一个任务。

让我们看看我之前的文章:JavaScript的9个陷阱及评点,在第 9 点 Focus Pocus 中提到的问题。原作者对这个认识有所偏差,其实不只是 IE 的问题,而是现有 JavaScript 引擎对于线程实现的问题(关于线程,我的概念其实不多,如果不对,希望读者多多指教)。我们通过一个例子来说明,请访问 http://realazy.org/lab/settimeout.html. 我们来看 1 和 2。如果你能看看源代码,会发现我们的任务很简单,就是给文档增加一个 input 文本框,并聚焦和选中。请现在分别点击一下,可以看到,1 并没有能够聚焦和选中,而 2 可以。它们之间的区别在于,在执行:

时, 2 多了一个延迟时间为 0 的 setTimeout 的外围函数,即:

按照 JavaScript: The Definitive Guide 5th 的 14.1 所说:

在实践中,setTimeout 会在其完成当前任何延宕事件的事件处理器的执行,以及完成文档当前状态更新后,告诉浏览器去启用 setTimeout 内注册的函数。

其实,这是一个把需要执行的任务从队列中跳脱的技巧。回到前面的例子,JavaScript 引擎在执行 onkeypress 时,由于没有多线程的同步执行,不可能同时去处理刚创建元素的 focus 和 select 事件,由于这两个事件都不在队列中,在完成 onkeypress 后,JavaScript 引擎已经丢弃了这两个事件,正如你看到的例子 1 的情况。而在例子 2 中,由于setTimeout可以把任务从某个队列中跳脱成为新队列,因而能够得到期望的结果。

这才是延迟事件为 0 的setTimeout的真正目的。在此,你可以看看例子 3,它的任务是实时更新输入的文本,现在请试试,你会发现预览区域总是落后一拍,比如你输 a, 预览区并没有出现 a, 在紧接输入 b 时, a 才不慌不忙地出现。其实我们是有办法让预览区跟输入框同步地,在此我没有给出答案,因为上面所说的,就是解决思路,try it yourself!

点击这里返回网页教学网 网页制作 栏目

  • 上一篇网页设计:

  • 下一篇网页设计: 没有了
  • 最 新 热 门
     Flash AS 教程:交互动画
     Flash AS 教程:子类化显示对象
     Flash AS 教程:动画事件
     Flash AS 教程:帧循环
     Flash AS 教程:创建文档类(Document class)
     Flash AS 教程:构造函数(Constructor)
     Flash AS 教程:类和面向对象编程
     Flash游戏开发教程:第一节
     Flex程序开发心得小结
     关于XML在FLASH中的应用
    最 新 推 荐
     延迟事件为0的setTimeout的真正目的
     Javascript教程:关于内存泄漏问题
     document.createElement()用法及注意事项
     如何用博客来创业赚钱?
     学习JavaScript的事件
     PHP+JS实现搜索自动提示
     初学Ajax须注意的几个问题
     JavaScript扩展:正则像函数一样调用
     Javascript在IE和FF里的兼容问题
     Javascript教程:展示风格的价值
    相 关 文 章

    Javascript事件处理代码的三种写法
    无延迟翻滚的图形与CSS混合风格按钮
    关于DOM事件模型的两件事
    关于Javascript中的事件--Event对象
    Flash AS3生成单独“双击事件”
    Flash AS2 事件处理机制
    游戏制作:游戏的任务事件处理解决方案
    Flash AS3.0 强大的事件机制
    MovieClipLoader的事件处理秒差
    事件侦听器示例汇总

    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告

     

    Copyright 2006-2008 pcjx.com All Rights Reserved
    电脑技巧 版权所有 粤ICP备06059145号 地图
    本网站所有内容未经许可不得转载或做其他使用