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 24 Javascript
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
关于jQuery object and DOM element
Apr 15 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
VUE脚手架具体使用方法
May 20 Javascript
vue动态禁用控件绑定disable的例子
Oct 28 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 基于文件头的文件类型验证类函数
2012/05/01 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
[原创]PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】
2019/07/12 PHP
HTML中Select不用Disabled实现ReadOnly的效果
2008/04/07 Javascript
(function($){...})(jQuery)的意思
2010/07/22 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
JavaScript错误处理和堆栈追踪详解
2017/04/18 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
Python微信操控itchat的方法
2019/05/31 Python
python实现大文本文件分割
2019/07/22 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
外包公司软件测试工程师
2014/11/01 面试题
公司任命书范本
2014/06/04 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
公司年会开场白
2015/06/01 职场文书
失恋33天观后感
2015/06/11 职场文书
企业管理不到位检讨书
2019/06/27 职场文书