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 相关文章推荐
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
实例详解带参数的 npm script
May 28 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
微信小程序实现多图上传
Jun 19 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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
apache rewrite_module模块使用教程
2008/01/10 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
详解VUE单页应用骨架屏方案
2019/01/17 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
Python类属性的延迟计算
2016/10/22 Python
Python+Wordpress制作小说站
2017/04/14 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
Python关于反射的实例代码分享
2020/02/20 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
如何写python的配置文件
2020/06/07 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
J2EE中常用的名词进行解释
2015/11/09 面试题
会计顶岗实习心得
2014/01/25 职场文书
善意的谎言事例
2014/02/15 职场文书
活动总结的格式
2014/05/07 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
2014年社区工作总结
2014/11/18 职场文书
五年级下册复习计划
2015/01/19 职场文书
骨干教师个人总结
2015/02/11 职场文书
法务专员岗位职责
2015/02/14 职场文书