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支持firefox,ie7页面布局拖拽效果代码
Dec 20 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
May 06 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
基于Require.js使用方法(总结)
Oct 26 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 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 define()函数及defined()函数使用详解
2013/06/09 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
javascript判断变量是否有值的方法
2015/04/20 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
JavaScript创建对象的方式小结(4种方式)
2015/12/17 Javascript
node网页分段渲染详解
2016/09/05 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
python轻松查到删除自己的微信好友
2016/01/10 Python
Python 爬虫图片简单实现
2017/06/01 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
python连接mongodb集群方法详解
2020/02/13 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
python实现计算器简易版
2020/12/17 Python
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
经贸日语毕业生自荐信
2013/11/03 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
会议邀请函
2015/01/30 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
vue使用watch监听属性变化
2022/04/30 Vue.js