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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
Extjs学习笔记之九 数据模型(上)
Jan 11 Javascript
JavaScript的document对象和window对象详解
Dec 30 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
浅谈JavaScript中this的指向问题
Jul 28 Javascript
JavaScript 常见的继承方式汇总
Sep 17 Javascript
vscode中使用npm安装babel的方法
Aug 02 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
用cookies来跟踪识别用户
2006/10/09 PHP
分享PHP header函数使用教程
2013/09/05 PHP
php实现文件下载简单示例(代码实现文件下载)
2014/03/10 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
php多重接口的实现方法
2015/06/20 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
购物车选中得到价格实现示例
2014/01/26 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
2019/04/11 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
Python中的super用法详解
2015/05/28 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
python实现简单名片管理系统
2018/11/30 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
python中xlrd模块的使用详解
2021/02/01 Python
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
夜大毕业生自我评价分享
2013/11/10 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
互联网创业计划书写作技巧攻略
2014/03/23 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
房租涨价通知
2015/04/23 职场文书
2015年工程师工作总结
2015/04/30 职场文书
重阳节活动主持词
2015/07/04 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
话题作文之自信作文
2019/11/15 职场文书
Python anaconda安装库命令详解
2021/10/16 Python
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python