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 相关文章推荐
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
jquery实现submit提交表单
Feb 03 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
Apr 28 jQuery
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
最令PHP初学者们头痛的十四个问题
2007/01/15 PHP
PHP下几种删除目录的方法总结
2007/08/19 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
javascript定义函数的方法
2010/12/06 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
Python学习之time模块的基本使用
2021/01/17 Python
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
几道Web/Ajax的面试题
2016/11/05 面试题
槐乡的孩子教学反思
2014/04/27 职场文书
ktv好的活动方案
2014/08/15 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python