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 表单验证扩展(四)
Oct 20 Javascript
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
基于vue实现探探滑动组件功能
May 29 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
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
对Session和Cookie的区分与解释
2007/03/16 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
JavaScript QueryString解析类代码
2010/01/17 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
python urllib爬虫模块使用解析
2019/09/05 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
护士节活动总结
2014/08/29 职场文书
土地转让协议书
2014/09/27 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
交通事故协议书范本
2016/03/19 职场文书
python3 字符串str和bytes相互转换
2022/03/23 Python
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技