Javascript延迟执行实现方法(setTimeout)
更新时间：2010年12月30日 22:09:42 作者：
延迟执行，其实就是用到了setTimeout这个函数。善于利用这个函数，可以减少很多ajax的请求，以及dom操作。
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类似。
其实有很多这样这样的例子，有些事情，不需要马上去执行，可以延迟一点时间才执行，时间很短，不影响用户体验，又可以减少很多不必要的消耗。
需求：页面上有几个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类似。
其实有很多这样这样的例子，有些事情，不需要马上去执行，可以延迟一点时间才执行，时间很短，不影响用户体验，又可以减少很多不必要的消耗。
相关文章
本篇文章主要是对JS去掉第一个字符和最后一个字符的实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
本文针对经常使用长连接进行消息收发的应答场景，采用 Websocket 长连接作为服务监听的对象，模拟了一套类 http 服务框架，通过实例代码介绍了Javascript 基于长连接的服务框架,需要的朋友可以参考下2022-07-07
这篇文章主要给大家介绍了关于uniapp页面跳转的五种方式,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了JS常见错误(Error)及处理方案详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-07-07
这篇文章主要介绍了总结分享10个JavaScript代码优化小tips，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
这篇文章主要为大家详细介绍了javascript移动开发中touch触摸事件，感兴趣的小伙伴们可以参考一下2016-03-03
当下最流行的前端开发框架Bootstrap，可大大简化网站开发过程，从而深受广大开发者的喜欢，你如果也喜欢Bootstrap前端开发框架，不要错过这次旅行2016-05-05
Bootstrap每天必学之模态框（Modal）插件,模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等,感兴趣的小伙伴们可以参考一下2016-04-04![webpack打包html里面img后src为“[object Module]”问题](//img.jbzj.com/images/xgimg/bcimg8.png)
webpack打包html里面img后src为“[object Module]”问题
这篇文章主要介绍了webpack打包html里面img后src为“[object Module]”问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
常见的原始JS选择器有getElementById，getElementsByName，getElementsByTagName，就使用上为大家总结下2014-04-04
![webpack打包html里面img后src为“[object Module]”问题](http://img.jbzj.com/images/xgimg/bcimg8.png)
最新评论