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的6个Tab选项卡插件
Sep 03 Javascript
通过DOM脚本去设置样式信息
Sep 19 Javascript
Javascript 加载和执行-性能提高篇
Dec 28 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
JS定义回车事件(实现代码)
Jul 08 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
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学习之 认清变量的作用范围
2010/01/26 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
thinkphp5.1框架模板赋值与变量输出示例
2020/05/25 PHP
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
简单实现节流函数和防抖函数过程解析
2019/10/08 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
2020/09/07 Javascript
python使用xmlrpc实例讲解
2013/12/17 Python
python执行外部程序的常用方法小结
2015/03/21 Python
给Python初学者的一些编程技巧
2015/04/03 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
wxPython色环电阻计算器
2019/11/18 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
银行学习十八大感想
2014/01/11 职场文书
大学班级文化建设方案
2014/05/06 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
2014年收银工作总结
2014/11/13 职场文书
小学教师自我评价
2015/03/04 职场文书
夏洛特的网观后感
2015/06/15 职场文书
Java 超详细讲解hashCode方法
2022/04/07 Java/Android