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 白痴级入门教程
Nov 11 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
完美解决js传递参数中加号和&号自动改变的方法
Oct 11 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
讲解vue-router之什么是编程式路由
May 28 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 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实现的观察者模式实例
2017/06/21 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
js注意img图片的onerror事件的分析
2011/01/01 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
用Python的urllib库提交WEB表单
2009/02/24 Python
Python with用法实例
2015/04/14 Python
从Python的源码来解析Python下的freeblock
2015/05/11 Python
python学习必备知识汇总
2017/09/08 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
python3使用GUI统计代码量
2019/09/18 Python
python tornado修改log输出方式
2019/11/18 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
网吧收银员岗位职责
2013/12/14 职场文书
xxx同志考察材料
2014/02/07 职场文书
装修设计师求职信
2014/02/26 职场文书
教师工作决心书
2015/02/04 职场文书
杨善洲电影观后感
2015/06/04 职场文书
公司周年庆典致辞
2015/07/30 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
四则混合运算教学反思
2016/02/23 职场文书
作文之亲情600字
2019/09/23 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS