在chrome等浏览器上验证没问题后,按照惯例,在IE上出问题了。。。gif并没有重新播放一次。当时想的是,可能是IE反应太慢了,在src属性重置的那个间隔内,没有意识到这一点。于是就尝试加了个setTimeout,把重新设置src的操作丢到了异步任务队列中。

以上代码在键盘输入场景下,能够在控制台输入最新的输入框内文本。但是当使用鼠标右键操作进行粘贴或剪切时,控制台输入的文本内容是操作前的旧内容。为了获取操作后的新文本内容,可以将对文本的获取和处理放在setTimeout中延时执行:

这段代码将使得页面打开5秒钟后显示对话框“hello”。其中最后一句也可以写为:
window.setTimeout”,5000);
读者可以体会它们的差别,在window.setInterval方法中也有这样的性质。
如果在延时期限到达之前取消延执行,可以使用window.clearTimeout方法,该方法接收一个id,表示一个定时器。这个id是由setTimeout方法返回的,例如:

该方法使得一个函数每隔固定时间被调用一次,是一个很常用的方法。如果想要取消定时执行,和clearTimeout方法类似,可以调用window.clearInterval方法。clearInterval方法同样接收一个setInterval方法返回的值作为参数。例如:
//定义一个反复执行的调用 var
id=window.setInterval(“somefunction”,10000); //取消定时执行
window.clearInterval;
上面的代码仅用于说明怎样取消一个定时执行。实际上在很多场合都需要用到setInterval方法。

有时候整理一篇文章,取个标题好难。最近做了几个动画的项目,运用JS和CSS3实现,期间会出现多次触发JS动画问题,如何解决呢,这就是我们今天要讨论的话题:关于javascript中setTimeout和SetInterval。

实际上,setTimeout做的事情是:在指定delay时间后,将指定方法作为异步任务添加到异步任务队列中

案例1

2.window.setInterval方法

除了点击这种单次事件,浏览器上有一些会疯狂触发的事件,例如onreaize事件。如果给这个事件绑定了处理函数,在浏览器窗口大小改变的时候会很高频地触发处理函数。如果处理函数中有DOM操作的话,对页面性能影响会很大,尤其是在IE浏览器中,甚至可能让浏览器崩溃。

两个方法的第二个参数是milliseconds,表示延时或者重复执行的毫秒数。下面分别介绍两种方法。

为了能找到更好的方法,在网上看过不少的信息,以下就是我整理出来的一些对两者的见解。

//响应键盘输入,粘贴和剪切事件$.on('keyuppastecut',function.val;
$logo.on('mouseenter',function(){//hover时重新播放gif动画var$logoImg=$.find;$logoImg.attr('src','');setTimeout{//IE下要这样搞,不然不能重新播放动画$logoImg.attr('src',_opt.logoImg);},0);});

纵使setTimeout有些不尽人意,但这些瑕疵在大部分情况下,用户无法感知出来。

要想做好兼容性强、性能高的动画效果,我们需要熟练掌握setTimeout和SetInterval。除了这个之外,我们还需要了解下clearQueue,后续吧。。。

从方法名和大部分现象来看,很容易产生以上的误解。在我们理解了JS主线程的特点后,知道了它会优先完成同步任务,在同步任务执行过程中,不会执行其它任务。

setTimeout这个方法相信很多初学者都有过误解:让JS从现在开始,经过指定的时间后,执行相应的函数。

SetInterval也可以设置JS里元素延时显示。

该方法可以延时执行一个函数,例如:

clearTimeout 清除已设置的setTimeout对象 clearInterval
清除已设置的setInterval对象

以上2个案例代码简单且有代表性。在最近做的项目中,做过比较复杂的动画,今天在这里就不贴出来了,后面会单独针对动画写一些代表性的文章,有兴趣的关注本网站。

window.setInterval(expression,milliseconds);

所以,如果setTimeout的定时到了执行时间,JS主线程仍然还在执行同步任务,setTimeout所指定的方法并不会立刻执行。更惨的是,即使JS主线程执行完了同步任务,也不一定会执行setTimeout指定的方法,因为异步任务队列中可能有更早加入的异步任务。

$logo.on('mouseenter',function(){//hover时重新播放gif动画var$logoImg=$.find;$logoImg.attr('src','');//将img的src置为空$logoImg.attr('src',_opt.logoImg);//重新设置src为gif链接,以实现重新播放});
//响应键盘输入,粘贴和剪切事件$.on('keyuppastecut',function;setTimeout{//使鼠标粘贴和剪切时,输入框内内容为最新console.log;

认知setTimeout和SetInterval

最惨的是,即使天时地利人和,到了定时的时间时,JS主线程空闲,异步任务队列中只有setTimeout执行的方法,这个方法的执行时间也并不是精确的delay时间,因为浏览器上的计时器精确度有限。

使用定时器实现JavaScript的延期执行或重复执行
window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行;而后者则可以使一段代码每过指定时间就运行一次。

setTimeout(“function”,time) 设置一个超时对象
setInterval(“function”,time) 设置一个超时对象

1.window.setTimeout方法

总结

使用SetInterval和设定延时函数setTimeout 很类似。setTimeout
运用在延迟一段时间,再进行某项操作。

有这样一个需求:设计给了一个gif动画,gif本身是单次播放的。产品要求页面加载时动画播放一次。后续用户只要鼠标hover到动画上,动画就重新播放一次。利用搜索引擎的强大功能,很快找到了实现方案:

/***限制method执行频次,当方法100ms之内没有*再次被调用时,才执行method方法*@param{function}method被限制的方法*@param{Object}contextmethod执行的上下文*/functionthrottle{clearTimeout;method.tid=setTimeout{method.call;}functionfnResize;}window.onresize=function;}

案例2

其中,expression可以是用引号括起来的一段代码,也可以是一个函数名,到了指定的时间,系统便会自动调用该函数,当使用函数名作为调用句柄时,不能带有任何参数;而使用字符串时,则可以在其中写入要传递的参数。

如果你实在需要在这类事件上绑定操作DOM的函数,那么可以考虑一下限制一下事件执行的时间间隔,至少不要那么频繁。至于设置多少时间间隔,看具体场景和需求。以下代码是利用setTimeout来实现事件执行频率控制:

具体应用

SetInterval为自动重复,setTimeout不会重复。

window.setTimeout(expression,milliseconds);

经常有这种场景:监控input或者textarea中文本的变化,然后触发某个事件处理程序。考虑到除了键盘输入,还有鼠标的粘贴和剪切操作,比较完整的监控输入内容改变的方法是:

相关文章

网站地图xml地图