zoukankan      html  css  js  c++  java
  • throttle(节流函数) 与 debounce(防抖动函数)理解与实现

    我们会对一些触发频率较高的事件进行监听,(如:resize scroll keyup事件)

    如果在回调里执行高性能消耗的操作(如反复操作dom, 发起ajax请求等),反复触发时会使得性能消耗提高,浏览器卡顿,用户使用体验差。

    或者我们需要对触发的事件延迟执行回调,此时可以借助throttle/debounce函数来实现需求。

    throttle: 节流函数

      在一个时间段内只执行一次

    debounce:防抖函数

      连续触发事件的时候,事件监听函数不会立即执行,而是等我们一段时间内不再触发事件的时候,再执行事件监听函数。

    throttle函数实现

    function throttle (func, wait) {
      var lastTime = 0;
      return function () {
        var time = Date.now();
        if (time - lastTime >= wait) {
          func();
          lastTime = time;
        };
      };
    };
    
    // handler 是事件监听函数
    var handler = function () {
      console.log('throttle');
    };
    
    window.onscroll = throttle(handler, 300);



    debounce函数实现

    function debounce (func, wait) {
      var timer = null;
      return function () {
        clearTimeout(timer);
        timer = setTimeout(func, wait);
      };
    };
    
    // handler 是事件监听函数
    var handler = function () {
      console.log('debounce');
    };
    
    window.onscroll = debounce(handler, 300);


  • 相关阅读:
    20180925-5代码规范
    20180925-4 单元测试,结对
    20180925-6 四则运算试题生成
    20180925-3 效能分析
    20170925-2 功能测试
    20180925-7 规格说明书——吉林市两日游
    20180918-1 词频统计
    第二周例行报告
    iOS开发-CocoaPods使用详细说明
    svn的使用详解
  • 原文地址:https://www.cnblogs.com/Mr-Rshare/p/11244228.html
Copyright © 2011-2022 走看看