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 相关文章推荐
很酷的javascript loading效果代码
Jun 18 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
Uploadify上传文件方法
Mar 16 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
node实现的爬虫功能示例
May 04 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 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的字符串用法小结
2010/06/08 PHP
PHP制作万年历
2015/01/07 PHP
twig模板常用语句实例小结
2016/02/04 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
一组JS创建和操作表格的函数集合
2009/05/07 Javascript
JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")
2011/08/23 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
回调函数的意义以及python实现实例
2017/06/20 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
python dlib人脸识别代码实例
2019/04/04 Python
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
中文教师求职信
2014/02/22 职场文书
带病坚持工作事迹
2014/05/03 职场文书
小学生倡议书范文
2014/05/13 职场文书
人事任命书格式
2014/06/05 职场文书
电话客服工作职责
2014/07/27 职场文书
小学校长汇报材料
2014/08/20 职场文书
升学宴答谢词
2015/01/05 职场文书
校园开放日新闻稿
2015/07/17 职场文书
会议简报格式范文
2015/07/20 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
Java8中Stream的一些神操作
2021/11/02 Java/Android
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫