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

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

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

    函数节流   throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeou ...

  2. 【Mocha.js 101】钩子函数

    前情提要 在上一篇文章<[Mocha.js 101]同步.异步与 Promise>中,我们学会了如何对同步方法.异步回调方法以及 Promise 进行测试. 在本篇文章中,我们将了解到 M ...

  3. JS魔法堂:函数重载 之 获取变量的数据类型

    Brief 有时我们需要根据入参的数据类型来决定调用哪个函数实现,就是说所谓的函数重载(function overloading).因为JS没有内置函数重载的特性,正好给机会我们思考和实现一套这样的机 ...

  4. js中的回调函数的理解和使用方法

    js中的回调函数的理解和使用方法 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为 ...

  5. js两种定义函数、继承方式及区别

    一:js两种定义函数的方式及区别 1:函数声明: function sayA() { alert("i am A"); } 2:函数表达式: var sayB = function ...

  6. WebView中Js与Android本地函数的相互调用

    介绍 随着Html5的普及,html在表现力上不一定比原生应用差,并且有很强的扩展兼容性,所以越来越多的应用是采用Html与Android原生混合开发模式实现. 既然要实现混合开发,那么Js与Andr ...

  7. ASP.NET前台JS与后台CS函数如何互相调用

    摘要: 在实际的Web开发中,我们可能会常常遇到后台调用前台JS代码或者前台JS调用后台代码的情况.今天就把比较实用的前后台相互调用的方法总结出来和大家分享. 在实际的Web开发中,我们可能会常常遇到 ...

  8. JS封装cookie操作函数实例(设置、读取、删除)

    本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...

  9. js调用父框架函数

    if (window.parent && window.parent.frames["frame_main"]) { alert(window.parent.fra ...

随机推荐

  1. 退役前的记录(2018.10.14-NOIP2018)

    退役前的记录 诸位好,我是\(CJ\)最菜的\(Oier\),已经是\(G2\)的老年选手了,不知道什么时候就会退役了,总之\(G1\ double\)的机会已经没有了,去年因为联赛失利而止步,而今年 ...

  2. python 模块之-os

    python  os模块 import os os.getcwd()       # python脚本所在工作目录的路径 os.chdir(r'/tmp')        # 切换目录到tmp os. ...

  3. docker --swarm创建一个集群

    如果搭建错误可以强制脱离集群网络: docker swarm leave --force 初始化集群网络管理节点: docker swarm init --advertise-addr 10.101. ...

  4. How to Add Trust Sites into IE before IE10 through Group Policy

    Due to IE10 published, I'll conclude the methods that how to add trust sites in to IE of the version ...

  5. sklearn 的train_test_split

    train_test_split函数用于将矩阵随机划分为训练子集和测试子集,并返回划分好的训练集测试集样本和训练集测试集标签. 格式: from sklearn.model_selection imp ...

  6. SQLite 学习笔记(一)

      (1)创建数据库   在命令行中切换到sqlite.exe所在的文件夹   在命令中键入sqlite3 test.db;即可创建了一个名为test.db的数据库   由于此时的数据库中没有任何表及 ...

  7. spring-mvc springboot 使用MockMvc对controller进行测试

    网上基本都是参考官方的使用方式,使用了import static,个人感觉这种方式特别不好,代码提示性不友好.所以在此进行说明,也方便自己以后使用. 1. 引入spring-test相关jar包,sp ...

  8. vi怎么查找关键字

    进入vi的命令模式,具体操作:编辑模式下键入“:”,此时进入命令模式 在命令模式下键入“/”.

  9. 第一章:认识Ajax

    第一节:Ajax 简介 1,Ajax 是一种网页开发技术,(Asynchronous Javascript + XML)异步JavaScript 和XML:2,Ajax 是异步交互,局部刷新:3,Aj ...

  10. python类变量和实例变量的区别

    类变量:是为类服务的,类所有的实例都共享使用,在一个地方被改变,所有调用的地方变量值都改变.定义类时的写法为类名.变量名 实例变量:是在实例中生效的,每个实例变量的值都根据实例本身需求进行修改,不会影 ...