zoukankan      html  css  js  c++  java
  • 关于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类似。

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

  • 相关阅读:
    什么叫TLD、gTLD、nTLD、ccTLD、iTLD 以及几者之间的关系
    socket
    windows下codeblocks报错undefined reference to `WSAStartup@8'|
    Codeforces 467C George and Job | DP
    51Nod 1049最大子段和 | 模板
    51Nod 最大子矩阵和 | DP
    AtomicInteger
    sun.misc.unsafe
    CAS
    java中的四种引用
  • 原文地址:https://www.cnblogs.com/floyd/p/1921276.html
Copyright © 2011-2022 走看看