/* throttle1函數(shù),節(jié)流實現(xiàn)方式1:時間戳+定時器
    	 *  @params method,duration 第一個參數(shù)為事件觸發(fā)時的真正要執(zhí)行的函數(shù)
    	 *  第二個參數(shù)duration表示為定義的間隔時間
    	 *
    	 *  原理:通過判斷是否達到一定的時間來觸發(fā)函數(shù),若沒有規(guī)定時間則使用計時器進行延遲,而下一次事件則會重新設定計時器,它是間隔時間執(zhí)行,不管事件觸發(fā)有多頻繁,都會保證在規(guī)定內(nèi)的事件一定會執(zhí)行一次真正事件處理函數(shù)
    	 *
    	 * */
function throttle1(method, duration) {
    var timer = null;
    var prevTime = new Date();   // 之前的時間
return function() {
    var that = this,
        currentTime = new Date(),          // 獲取系統(tǒng)當前時間
        resTime = currentTime - prevTime;  // 時間戳
    // 打印本次當前的世間和上次世間間隔的時間差
    console.log("時間差", resTime);
    // 當前距離上次執(zhí)行時間小于設置的時間間隔
    if(resTime < duration) {
        // 清除上次的定時器,取消上次調(diào)用的隊列任務，重新設置定時器。這樣就可以保證500毫秒秒內(nèi)函數(shù)只會被觸發(fā)一次，達到了函數(shù)節(jié)流的目的
        clearTimeout(timer);
        timer = setTimeout(function(){
            prevTime = currentTime;
            method.apply(that);
        }, duration)
    }else { // 當前距離上次執(zhí)行的時間大于等于設置的時間時,直接執(zhí)行函數(shù)
        // 記錄執(zhí)行方法的時間
        prevTime = currentTime;
        method.apply(that);
    }
    
}
}

// 事件觸發(fā)的方法(函數(shù)),函數(shù)節(jié)流1
function handleJieLiu1(){
console.log("節(jié)流方式1");
}   

var handleJieLiu1 = throttle1(handleJieLiu1, 500);
document.addEventListener('mousewheel', handleJieLiu1);

/*
* throttle2函數(shù)節(jié)流實現(xiàn)方式2:重置一個開關變量+定時器
* @params method,duration形參數(shù)與上面的含義一致
* @return 返回的是一個事件處理函數(shù)
*
* 在throttle2執(zhí)行時定義了runFlag的初始值,通過閉包返回一個匿名函數(shù)作為事件處理函數(shù),
*
* 在返回的函數(shù)內(nèi)部判斷runFlag的狀態(tài)并確定執(zhí)行真正的函數(shù)method還是跳出,

每次執(zhí)行method后會更改runFlag的狀態(tài),通過定時器在durtion該規(guī)定的間隔時間內(nèi)重置runFlag鎖的狀態(tài)
* 
*/
function throttle2(method, duration){
  // 當前時間間隔內(nèi)是否有方法執(zhí)行,設置一個開關標識
  var runFlag = false;
// 返回一個事件處理函數(shù)
return function(e) {
    // 判斷當前是否有方法執(zhí)行,有則什么都不做,若為true,則跳出
    if(runFlag){
        return false;
    }
    // 開始執(zhí)行
    runFlag = true;
    // 添加定時器,在到達時間間隔時重置鎖的狀態(tài)
    setTimeout(function(){
        method(e);
        // 執(zhí)行完畢后,聲明當前沒有正在執(zhí)行的方法,方便下一個時間調(diào)用
        runFlag = false;
    }, duration)
}
} 
// 事件觸發(fā)的方法(函數(shù)),函數(shù)節(jié)流2
function handleJieLiu2(){
console.log("節(jié)流方式2");
}
var handleJieLiu2 = throttle2(handleJieLiu2, 500);
document.addEventListener('mousewheel', handleJieLiu2);

 /*
*  函數(shù)防抖
*  例如：假定時間間隔時500ms,頻繁不同的操作5s,且每兩次執(zhí)行時間小于等于間隔500ms
*  那么最后只執(zhí)行了1次，也就是每一次執(zhí)行時都結(jié)束上一次的執(zhí)行
*  @params method,duration,與上面一致
*
*  原理:它是維護一個計時器,規(guī)定在duration時間后出發(fā)時間處理函數(shù),但是在duration時間內(nèi)再次出發(fā)的化,都會清除當前的timer重新計時,這樣一來,只有最后一次操作事件處理函數(shù)才被真正的觸發(fā)
*
* 一般用于輸入框事件,常用場景就是表單的搜索或者聯(lián)想查詢,如果不使用防抖會連續(xù)發(fā)送請求,增加服務器的壓力,使用防抖后,會在用戶輸入要查詢的關鍵詞后才發(fā)送請求，百度搜索就是這么實現(xiàn)的
*
* 
*/
function debounce(method, duration) {
var timer = null;
return function(){
    var that = this,
        args = arguments;
    // 在本次調(diào)用之間的一個間隔時間內(nèi)若有方法在執(zhí)行,則終止該方法的執(zhí)行
    if(timer) {
        clearTimeout(timer);
    }
    // 開始執(zhí)行本次調(diào)用
    timer = setTimeout(function(){
        method.apply(that,args);
    }, duration)

}

}
    // 事件觸發(fā)的方法(函數(shù)),防抖
function handleFangDou(){
    console.log("函數(shù)的防抖",new Date());
}
var handleFangDou = debounce(handleFangDou, 500);
var oInput = document.querySelector("#input"); // 獲取input元素
oInput.addEventListener('keyup',handleFangDou);

// 函數(shù)接口
npm i -S lodash.throttle;

import throttle from 'lodash.throttle'; // 引入lodash.throttle庫

// 事件觸發(fā)的方法(函數(shù)),節(jié)流
function handleThrottle(){
    console.log("函數(shù)的節(jié)流",new Date());
}

throttle(handleThrottle, 500); // 將觸發(fā)事件處理函數(shù)作為第一個參數(shù)傳入,第二個參數(shù)為間隔的時間,這里是500毫秒

npm i -S loadsh.debounce
或者
cnpm install -S loadsh.debounce

import debounce from 'lodash.debounce'; // 函數(shù)防抖

function handleDebounce() {
    console.log("函數(shù)的防抖", new Date());
}                        

debounce(handleDebounce, 500);

// 自己封裝一個debounce函數(shù)用于防抖
  debounce(method, duration) {
          var timer = null;
         /*return function(){
            var that = this,
                args = arguments;
            // 在本次調(diào)用之間的一個間隔時間內(nèi)若有方法在執(zhí)行,則終止該方法的執(zhí)行
            if(timer) {
              clearTimeout(timer);
            }
            // 開始執(zhí)行本次調(diào)用
            timer = setTimeout(function(){
              method.apply(that,args);
            }, duration)

          }*/
          // 上面的return匿名函數(shù)可以用Es6的箭頭函數(shù),以下寫法與上面等價,最簡潔的寫法,但是沒有上面的代碼好理解
          return (...args) => {
            clearTimeout(timer);
            timer = setTimeout(() =>   method(...args), duration)
          }

  }

debounce(method, duration, timer = null) {
          return (...args) => {
            clearTimeout(timer);
            timer = setTimeout(() => {
              method(...args)
            }, duration)
          }

  }

/*
*  @authors 川川 (itclancode@163.com)
 * @ID suibichuanji
 * @date 2023-10-19
   @desc 封裝節(jié)流函數(shù)
*  @param method,duration:method事件處理函數(shù),duration:間隔的時間
*  @return 匿名函數(shù)
*  原理: 通過判斷是否達到一定的時間來觸發(fā)函數(shù),
*  若沒有規(guī)定時間則使用計時器進行延遲,而下一次事件則會重新設定計時器
*  它是間隔時間執(zhí)行,不管事件觸發(fā)有多頻繁
*  都會保證在規(guī)定內(nèi)的事件一定會執(zhí)行一次真正事件處理函數(shù)
* 
 */
function throttle(method, duration) {
    var timer = null;
    var prevTime = new Date(); // 之前的時間
    return function() {
      var that = this,
        currentTime = new Date(), // 獲取系統(tǒng)當前時間
        resTime = currentTime - prevTime; // 時間戳
      // 打印本次當前的世間和上次世間間隔的時間差
      console.log("時間差", resTime);
      // 當前距離上次執(zhí)行時間小于設置的時間間隔
      if (resTime < duration) {
        // 清除上次的定時器,取消上次調(diào)用的隊列任務，重新設置定時器。這樣就可以保證500毫秒秒內(nèi)函數(shù)只會被觸發(fā)一次，達到了函數(shù)節(jié)流的目的
        clearTimeout(timer);
        timer = setTimeout(function() {
          prevTime = currentTime;
          method.apply(that);
        }, duration)
      } else { // 當前距離上次執(zhí)行的時間大于等于設置的時間時,直接執(zhí)行函數(shù)
        // 記錄執(zhí)行方法的時間
        prevTime = currentTime;
        method.apply(that);
      }

    }
  }
  export default throttle;

import throttle from './throttle';


throttle(事件觸發(fā)處理函數(shù), 1000);

/**
 * 
 * @authors 川川 (itclancode@163.com)
 * @ID suibichuanji
 * @date  2023-10-19 
 * @version $Id$
 * @description  函數(shù)防抖
 * @param { method, duration} [method是事件處理函數(shù),duration是延遲時間]
 * 原理
 * 原理:它是維護一個計時器,規(guī)定在duration時間后出發(fā)時間處理函數(shù)
 * 但是在duration時間內(nèi)再次出發(fā)的化,都會清除當前的timer重新計時
 * 這樣一來,只有最后一次操作事件處理函數(shù)才被真正的觸發(fā)
 *
 * 一般用于輸入框事件,常用場景就是表單的搜索或者聯(lián)想查詢,
 * 如果不使用防抖會連續(xù)發(fā)送請求,增加服務器的壓力
 * 使用防抖后,會在用戶輸入要查詢的關鍵詞后才發(fā)送請求，百度搜索就是這么實現(xiàn)的
 */
function  debounce(method, duration) {
          var timer = null;
         return function(){
            var that = this,
                args = arguments;
            // 在本次調(diào)用之間的一個間隔時間內(nèi)若有方法在執(zhí)行,則終止該方法的執(zhí)行
            if(timer) {
              clearTimeout(timer);
            }
            // 開始執(zhí)行本次調(diào)用
            timer = setTimeout(function(){
              method.apply(that,args);
            }, duration)

          }

  }

  export default debounce;