js设定延迟时间的函数

1.如果想要在执行一个js函数之前延迟一段时间应该怎么做?

答:"setTimeout(‘update()‘,1000);"

其中update()函数就是延迟后执行的函数,后面的时间单位为ms。

实例一:

<script language="javascript">
    var i;// 第10行代码

    setTimeout("abc()",5000);
    function abc(){
        // 第11行代码以后的全部放在这个函数里
        alert(1);
    }
</script>

实例二:

<script>
var i=1;
var timeID=null;
function display()
{
  timeID = window.setInterval("delay()", 1000);
}
function delay()
{
  if(i<10)
  {
    alert(i);
    i++;
  }
  else
  {
    window.clearInterval(timeID);
  }
}
display();
</script>

如果你能看看源代码,会发现我们的任务很简单,就是给文档增加一个 input 文本框,并聚焦和选中。请现在分别点击一下,可以看到,1 并没有能够聚焦和选中,而 2 可以。它们之间的区别在于,在执行

input.focus();

input.select();

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

setTimeout(function(){

input.focus();

input.select();

}, 0);

按照 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 才不慌不忙地出现。其实我们是有办法让预览区跟输入框同步地,在此我没有给出答案,因为上面所说的,就是解决思路

时间: 2024-10-26 08:27:37

js设定延迟时间的函数的相关文章

underscore.js中的节流函数debounce及trottle

函数节流   throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeout函数 clearTimeout(cancelTimer); cancelTimer =setTimeout(function(){ switchControl.switchAciontFactory(view, conf); },300) 代码的意思就不做多说了,实际上我无意间实现了一个debou

给js设定一个统一的入口

javascript是种脚本语言,浏览器下载到哪儿就会执行到哪儿,这种特性会为编程提供方便,但也容易使程序过于凌乱,支离破碎. js从功能上可以分为两大部分--框架部分和应用部分,框架部分提供的是对js代码的组织作用,包括定义全局变量.命名空间方法等,每个页面都会有相同或类似的框架.应用部分提供的是页面功能逻辑,不同页面会有不同的功能,不同页面应用部分的代码也不尽相同. 给应用部分的js代码一个统一的入口,即: <script type="text/javascript">

js Array的一个函数indexOf( )

js Array的一个函数:indexOf(i) var  a = [1,2,3,4]; a.indexOf(2) 返回-1则表示2不在a中,反之则2为a的一个元素 此方法可以用来删除掉Array中的重复元素

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

JavaScript笔记(三):JS也有入口函数Main

在C和Java中,都有一个程序的入口函数或方法,即main函数或main方法.而在JavaScript中,程序是从JS源文件的头部开始运行的.但是某种意义上,我们仍然可以虚构出一个main函数来作为程序的起点,这样一来不仅可以跟其他语言统一了,而且说不定你会对JS有更深的理解. 1. 实际的入口 当把一个JavaScript文件交给JS引擎执行时,JS引擎就是从上到下逐条执行每条语句的,直到执行完所有代码. 2. 作用域链.全局作用域和全局对象 我们知道,JS中的每个函数在执行时都会产生一个新的

JS 字符unicode转换函数

/**js Unicode编码转换*/ var decToHex = function(str) {    var res=[];    for(var i=0;i < str.length;i++)        res[i]=("00"+str.charCodeAt(i).toString(16)).slice(-4);    return "\\u"+res.join("\\u");}var hexToDec = function(s

JS 用window.open()函数,父级页面如何取到子级页面的返回值?

父窗口:<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script> <script type=&quo

js 格式化时间日期函数小结

下面是脚本之家为大家整理的一些格式化时间日期的函数代码,需要的朋友可以参考下. 代码如下: Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(

JS调用C#后台函数获得后台参数(html获得C#参数)

    C#有自己的后台控件,跟后台交互很简单和方便,但有的时候不得不用html控件,要如何与后台交互是个问题.例如html获得后台参数后传到PHP进行数据库操作.下面简单介绍JS调用后台函数获得要传到前台的参数 C#后台代码(Default.aspx.cs): 1 public string getParameter() 2 { 3 string parameter = "这是要传到前台的参数"; 4 return parameter; 5 } Default.aspx部分代码: 注