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 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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 GeoIP的使用教程
2011/03/09 PHP
PHP 透明水印生成代码
2012/08/27 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
js判断元素是否隐藏的方法
2014/06/09 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
简述JS控制台的使用
2018/07/15 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
python模块之paramiko实例代码
2018/01/31 Python
深入浅析Python中的迭代器
2019/06/04 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
Internet主要有哪些网络群组成
2015/12/24 面试题
linux系统都有哪些运行级别
2012/04/15 面试题
采购类个人求职的自我评价
2014/02/18 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
2014年社区工作总结
2014/11/18 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
致运动员加油稿
2015/07/21 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
MySQL基础(二)
2021/04/05 MySQL
vue+springboot实现登录验证码
2021/05/27 Vue.js
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL