Javascript延迟执行实现方法(setTimeout)

1。延迟切换tab
需求：页面上有几个tab，切换tab的时候，会对某个特定区域的数据进行拉取更新。
弊端：用户从第一个tab切换一直快速切到尾，就会产生n个ajax请求。其实用户只是需要看到最后一个tab的数据。


代码如下:

var changeTab = function(){
var timeId = 0;
return function(tabId){
if(timeId){
clearTimeout(timeId);
timeId=0;
}
setTimeout(function(){
//ajax do something
},500);
};
}();

一个比较简单的例子，绑定在tab上的onmouseover，如果用户不停的来回切换tab，ajax请求不会执行，只有停顿500毫秒后，才会执行，500毫秒，其实蛮短的，基本上不会影响到用户体验。

2。延迟自动完成
需求：在文本输入框中，监听用户输入，实现自动完成功能。
弊端：用户每输入一个字符，都会产生一个ajax请求，如果用户连续输入了一长串内容，请求次数就很多，实际上，最后的那次，才是用户需要的。
代码与上面例子类似。

3。延迟滚动
需求：页面的广告，需要用户滚动到哪，就跟到哪。
弊端：用户滚动在底，触发了N次的让广告重新定位的函数。其实，只需要当用户停下的时候，才触发一次就足够了。
代码与1类似。

其实有很多这样这样的例子，有些事情，不需要马上去执行，可以延迟一点时间才执行，时间很短，不影响用户体验，又可以减少很多不必要的消耗。

赞 (0)

相关推荐

  • jquery 延迟执行实例介绍

    复制代码 代码如下: $(function(){ var $inputs = $('input[type=button]') .delay(500) .queue(function(){$(this).hide().dequeue();}) .delay(1500) .queue(function(){$(this).show();}); }); 以上代码让页面中的按钮在页面加载后500毫秒隐藏,然后再过1500毫秒显示出来. 复制代码 代码如下: $(function(){ var $inpu

  • js函数setTimeout延迟执行的简单介绍

    setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: code (必需):要调用的函数后要执行的 JavaScript 代码串. millisec(必需):在执行代码前需等待的毫秒数. 提示: setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout().实例: 复制代码 代码如下: function timed

  • js 链式延迟执行DOME

    这样的形式执行: 复制代码 代码如下: d.wait(3000).run(function(m){ //等待3秒 alert('从前有座山'); }).wait(1000).run(function(m){ //等待1秒 alert('山里有座庙'); }).wait(2000).run(function(m){ //等待2秒 alert('庙里有一个老和尚给一个小和尚讲故事'); }).wait(3000).run(function(m){ //等待3秒 alert('讲的故事是:'); })

  • 一个命令行(批处理)延迟执行命令的语法

    1.2003的工具包里有个sleep.exe2.结合vbs实现的代码 复制代码 代码如下: echo.wscript.sleep(2000)>s.vbs cscript //nologo s.vbs del s.vbs dir

  • C#实现程序等待延迟执行的方法

    本文实例讲述了C#实现程序等待延迟执行的方法.分享给大家供大家参考.具体如下: [System.Runtime.InteropServices.DllImport("kernel32.dll")] static extern uint GetTickCount(); /// <summary> /// 程序等待延迟执行 /// </summary> /// <param name="ms"></param> stati

  • JS页面延迟执行一些方法(整理)

    一般在JS页面延迟执行一些方法.可以使用以下的方法 jQuery.delay()方法简介 http://shawphy.com/2010/11/jquery-delay.html jQuery中queue和dequeue的用法 http://www.jb51.net/article/25481.htm Window.setTimeout http://www.jb51.net/article/20741.htm以下是我用到的一些例子. 复制代码 代码如下: //延迟查询,传一个查询btn的ID,

  • php和js编程中的延迟执行效果的代码

    php sleep(10); usleep(10); js里的 setInterval("方法", 100); PHP sleep() 函数 <?php echo date('h:i:s') . "<br />"; //暂停 10 秒 sleep(10); //重新开始 echo date('h:i:s'); ?>一个命令行(批处理)延迟执行命令的语法http://www.jb51.net/article/11381.htm

  • 对比分析iOS延迟执行的4种方式

    最近学习了延迟执行的几种方法,分享一下: 1.performSelector(NSObject)方法  2.NSTimer方法  3.GCD方法  4.sleep(NSThread)方法 一.performSelector方法: 复制代码 代码如下: [self performSelector:@selector(delayMethod) withObject:nil afterDelay:1.0f]; 1.特点: 此方式要求必须在主线程中执行,否则无效. 是一种非阻塞的执行方式, 暂时未找到取

  • JS 事件延迟执行说明分析

    思路:当用户划过 设置变量i=0; 每过100毫秒 i++ 当i==10的时候就刚好 是1秒.就触发事件. 否则用清楚setInterval i不在++: 哈哈.不知道我描述清楚没. 代码: 复制代码 代码如下: var delay=function(t,fn){ var i=0, j=10, t=(t*1000)/j, //把延迟时间平均分成10等份 _this=this, //解决this绑定问题,所以调用delay函数的时候,请处理好this指向本身对象 d=setInterval(fun

  • iOS延迟执行方法详解

    近日学习了延迟执行的几种方法,分享一下. 1.performSelector(NSObject)方法  2.NSTimer方法  3.GCD方法  4.sleep(NSThread)方法 延迟执行代码: - (void)delayDo : (id)sender { NSLog(@"do:%@",sender); } 1.performSelector(NSObject)方法 这是iOS中常用的一种延迟执行方法. 特点:这个方法必须要在主线程中使用.可以传递参数.可以取消操作,不能暂停.

随机推荐