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版)》

  • 相关阅读:
    lua与C++的绑定
    lua与C的绑定
    如何得到真实的需求?
    mysql学习笔记——对数据库的操作
    排列组合公式
    英语口语积累笔记
    初学C++-----------------类的组合
    初学C++-----------------类的拷贝构造函数
    初学C++-----------------类的构造函数、析构函数
    初学C++-----------------类的定义
  • 原文地址:https://www.cnblogs.com/wangdan0915/p/8274295.html
Copyright © 2011-2022 走看看