关于Javascript的延迟执行

延迟执行,其实就是用到了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类似。

 

其实有很多这样这样的例子,有些事情,不需要马上去执行,可以延迟一点时间才执行,时间很短,不影响用户体验,又可以减少很多不必要的消耗。

 

posted @   Floyd  阅读(13163)  评论(2编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 上周热点回顾(1.20-1.26)
· 【译】.NET 升级助手现在支持升级到集中式包管理
点击右上角即可分享
微信分享提示