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


Posted in Javascript onDecember 30, 2010

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类似。

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

Javascript 相关文章推荐
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
Javascript 加载和执行-性能提高篇
Dec 28 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
JS定义函数的几种常用方法小结
May 23 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
JavaScript的document对象和window对象详解
Dec 30 #Javascript
javascript hashtable 修正版 下载
Dec 30 #Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 #Javascript
javascript中创建对象的三种常用方法
Dec 30 #Javascript
javascript 闭包疑问
Dec 30 #Javascript
javascript数字数组去重复项的实现代码
Dec 30 #Javascript
ExtJs的Date格式字符代码
Dec 30 #Javascript
You might like
php 取得瑞年与平年的天数的代码
2009/08/10 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
PHP内置加密函数详解
2016/11/20 PHP
tp5.1 框架数据库-数据集操作实例分析
2020/05/26 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
JavaScript获取IP获取的是IPV6 如何校验
2016/06/12 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
jQuery事件详解
2017/02/23 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
python多线程使用方法实例详解
2019/12/30 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
应届生财务会计求职信
2013/11/05 职场文书
工作自我评价分享
2013/12/01 职场文书
技校毕业生的自我评价
2013/12/27 职场文书
创业计划书中要认真思考的问题
2013/12/28 职场文书
运动会广播稿80字
2014/01/23 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
普通员工辞职信范文
2015/05/12 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书