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模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
JS重载实现方法分析
Dec 16 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
vue.js实现图书管理功能
Sep 24 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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在线打包程序源码
2008/07/27 PHP
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
[02:30]联想杯DOTA2完美世界全国高校联赛—北京站现场
2015/11/16 DOTA
Python求解平方根的方法
2015/03/11 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
简单的Python调度器Schedule详解
2019/08/30 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
Django中的session用法详解
2020/03/09 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
python 操作excel表格的方法
2020/12/05 Python
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
毕业生幼师求职自荐信
2013/10/01 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
经费申请报告
2015/05/15 职场文书
少年犯观后感
2015/06/11 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书