zoukankan      html  css  js  c++  java
  • js函数节流

      函数节流背后的基本思想是指,某些代码不 可以在没有间断的情况连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后执行代码。当第二次调用该函数时,它会清楚前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。

    //如果没有第二个参数,那么就在全局作用域内执行该方法
    
    function throttle(method,context){
    
      clearTimeout(method.tId);
    
      method.tId=setTimeout(function(){
    
        method.call(context);
    
      },100);
    
    }
    
     
    
    function resizeDiv(){
    
      var div=document.getElementById('myDiv');
    
      div.style.height=div.offsetWidth+'px';
    
    };
    
    window.onresize=function(){
    
      throttle(resizeDiv);
    
    };

    另一种写法(不推荐)

    window.onresize=function(){
    
      var div=document.getElementById('myDiv');
    
      div.style.height=div.offsetWidth+'px';
    
    };

    这段非常简单的例子有两个问题可能会造成浏览器运行缓慢。首先,要计算offsetWidth属性,如果该元素或者页面上其他元素有非常复杂的css样式,那么这个过程将会很复杂。其次,设置某个元素的高度需要对页面进行回流来令改动生效。如果页面有很多元素同时应用了相当数量的css的话,这有需要很多计算。

    以上举的例子是改变窗口大小,再比如检索功能,也涉及到节流。

    注:只要代码是周期性执行的,都应该使用节流。

    参考书籍:《javascript高级程序设计(第3版)》

  • 相关阅读:
    strtok和strtok_r
    几种更新(Update语句)查询的方法
    常见的几种RuntimeException
    初识ASP.NET---若干常见错误
    Microsoft.AlphaImageLoader滤镜解说
    情绪管理--不要总做“好脾气”的人。
    Linux中搭建SVNserver
    Java虚拟机的启动与程序的执行
    Ubuntu下deb包的安装方法
    財哥面京东dm的经历【帮財哥发的】
  • 原文地址:https://www.cnblogs.com/wangdan0915/p/8274295.html
Copyright © 2011-2022 走看看