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网页右下角提示框实例
Oct 14 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
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学习之function的用法
2012/07/14 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
layui使用label标签的方法
2019/09/14 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
Python中的高级函数map/reduce使用实例
2015/04/13 Python
Python中super关键字用法实例分析
2015/05/28 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
C++面试题目
2013/06/25 面试题
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
自荐信的五个重要部分
2013/10/29 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
幼师中班个人总结
2015/02/12 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js