/* throttle1函數(shù),節(jié)流實(shí)現(xiàn)方式1:時(shí)間戳+定時(shí)器
    	 *  @params method,duration 第一個(gè)參數(shù)為事件觸發(fā)時(shí)的真正要執(zhí)行的函數(shù)
    	 *  第二個(gè)參數(shù)duration表示為定義的間隔時(shí)間
    	 *
    	 *  原理:通過(guò)判斷是否達(dá)到一定的時(shí)間來(lái)觸發(fā)函數(shù),若沒(méi)有規(guī)定時(shí)間則使用計(jì)時(shí)器進(jìn)行延遲,而下一次事件則會(huì)重新設(shè)定計(jì)時(shí)器,它是間隔時(shí)間執(zhí)行,不管事件觸發(fā)有多頻繁,都會(huì)保證在規(guī)定內(nèi)的事件一定會(huì)執(zhí)行一次真正事件處理函數(shù)
    	 *
    	 * */
function throttle1(method, duration) {
    var timer = null;
    var prevTime = new Date();   // 之前的時(shí)間
return function() {
    var that = this,
        currentTime = new Date(),          // 獲取系統(tǒng)當(dāng)前時(shí)間
        resTime = currentTime - prevTime;  // 時(shí)間戳
    // 打印本次當(dāng)前的世間和上次世間間隔的時(shí)間差
    console.log("時(shí)間差", resTime);
    // 當(dāng)前距離上次執(zhí)行時(shí)間小于設(shè)置的時(shí)間間隔
    if(resTime < duration) {
        // 清除上次的定時(shí)器,取消上次調(diào)用的隊(duì)列任務(wù)，重新設(shè)置定時(shí)器。這樣就可以保證500毫秒秒內(nèi)函數(shù)只會(huì)被觸發(fā)一次，達(dá)到了函數(shù)節(jié)流的目的
        clearTimeout(timer);
        timer = setTimeout(function(){
            prevTime = currentTime;
            method.apply(that);
        }, duration)
    }else { // 當(dāng)前距離上次執(zhí)行的時(shí)間大于等于設(shè)置的時(shí)間時(shí),直接執(zhí)行函數(shù)
        // 記錄執(zhí)行方法的時(shí)間
        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é)流實(shí)現(xiàn)方式2:重置一個(gè)開(kāi)關(guān)變量+定時(shí)器
* @params method,duration形參數(shù)與上面的含義一致
* @return 返回的是一個(gè)事件處理函數(shù)
*
* 在throttle2執(zhí)行時(shí)定義了runFlag的初始值,通過(guò)閉包返回一個(gè)匿名函數(shù)作為事件處理函數(shù),
*
* 在返回的函數(shù)內(nèi)部判斷runFlag的狀態(tài)并確定執(zhí)行真正的函數(shù)method還是跳出,

每次執(zhí)行method后會(huì)更改runFlag的狀態(tài),通過(guò)定時(shí)器在durtion該規(guī)定的間隔時(shí)間內(nèi)重置runFlag鎖的狀態(tài)
* 
*/
function throttle2(method, duration){
  // 當(dāng)前時(shí)間間隔內(nèi)是否有方法執(zhí)行,設(shè)置一個(gè)開(kāi)關(guān)標(biāo)識(shí)
  var runFlag = false;
// 返回一個(gè)事件處理函數(shù)
return function(e) {
    // 判斷當(dāng)前是否有方法執(zhí)行,有則什么都不做,若為true,則跳出
    if(runFlag){
        return false;
    }
    // 開(kāi)始執(zhí)行
    runFlag = true;
    // 添加定時(shí)器,在到達(dá)時(shí)間間隔時(shí)重置鎖的狀態(tài)
    setTimeout(function(){
        method(e);
        // 執(zhí)行完畢后,聲明當(dāng)前沒(méi)有正在執(zhí)行的方法,方便下一個(gè)時(shí)間調(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ù)防抖
*  例如：假定時(shí)間間隔時(shí)500ms,頻繁不同的操作5s,且每?jī)纱螆?zhí)行時(shí)間小于等于間隔500ms
*  那么最后只執(zhí)行了1次，也就是每一次執(zhí)行時(shí)都結(jié)束上一次的執(zhí)行
*  @params method,duration,與上面一致
*
*  原理:它是維護(hù)一個(gè)計(jì)時(shí)器,規(guī)定在duration時(shí)間后出發(fā)時(shí)間處理函數(shù),但是在duration時(shí)間內(nèi)再次出發(fā)的化,都會(huì)清除當(dāng)前的timer重新計(jì)時(shí),這樣一來(lái),只有最后一次操作事件處理函數(shù)才被真正的觸發(fā)
*
* 一般用于輸入框事件,常用場(chǎng)景就是表單的搜索或者聯(lián)想查詢,如果不使用防抖會(huì)連續(xù)發(fā)送請(qǐng)求,增加服務(wù)器的壓力,使用防抖后,會(huì)在用戶輸入要查詢的關(guān)鍵詞后才發(fā)送請(qǐng)求，百度搜索就是這么實(shí)現(xiàn)的
*
* 
*/
function debounce(method, duration) {
var timer = null;
return function(){
    var that = this,
        args = arguments;
    // 在本次調(diào)用之間的一個(gè)間隔時(shí)間內(nèi)若有方法在執(zhí)行,則終止該方法的執(zhí)行
    if(timer) {
        clearTimeout(timer);
    }
    // 開(kāi)始執(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庫(kù)

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

throttle(handleThrottle, 500); // 將觸發(fā)事件處理函數(shù)作為第一個(gè)參數(shù)傳入,第二個(gè)參數(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);

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

          }*/
          // 上面的return匿名函數(shù)可以用Es6的箭頭函數(shù),以下寫(xiě)法與上面等價(jià),最簡(jiǎn)潔的寫(xiě)法,但是沒(méi)有上面的代碼好理解
          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:間隔的時(shí)間
*  @return 匿名函數(shù)
*  原理: 通過(guò)判斷是否達(dá)到一定的時(shí)間來(lái)觸發(fā)函數(shù),
*  若沒(méi)有規(guī)定時(shí)間則使用計(jì)時(shí)器進(jìn)行延遲,而下一次事件則會(huì)重新設(shè)定計(jì)時(shí)器
*  它是間隔時(shí)間執(zhí)行,不管事件觸發(fā)有多頻繁
*  都會(huì)保證在規(guī)定內(nèi)的事件一定會(huì)執(zhí)行一次真正事件處理函數(shù)
* 
 */
function throttle(method, duration) {
    var timer = null;
    var prevTime = new Date(); // 之前的時(shí)間
    return function() {
      var that = this,
        currentTime = new Date(), // 獲取系統(tǒng)當(dāng)前時(shí)間
        resTime = currentTime - prevTime; // 時(shí)間戳
      // 打印本次當(dāng)前的世間和上次世間間隔的時(shí)間差
      console.log("時(shí)間差", resTime);
      // 當(dāng)前距離上次執(zhí)行時(shí)間小于設(shè)置的時(shí)間間隔
      if (resTime < duration) {
        // 清除上次的定時(shí)器,取消上次調(diào)用的隊(duì)列任務(wù)，重新設(shè)置定時(shí)器。這樣就可以保證500毫秒秒內(nèi)函數(shù)只會(huì)被觸發(fā)一次，達(dá)到了函數(shù)節(jié)流的目的
        clearTimeout(timer);
        timer = setTimeout(function() {
          prevTime = currentTime;
          method.apply(that);
        }, duration)
      } else { // 當(dāng)前距離上次執(zhí)行的時(shí)間大于等于設(shè)置的時(shí)間時(shí),直接執(zhí)行函數(shù)
        // 記錄執(zhí)行方法的時(shí)間
        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是延遲時(shí)間]
 * 原理
 * 原理:它是維護(hù)一個(gè)計(jì)時(shí)器,規(guī)定在duration時(shí)間后出發(fā)時(shí)間處理函數(shù)
 * 但是在duration時(shí)間內(nèi)再次出發(fā)的化,都會(huì)清除當(dāng)前的timer重新計(jì)時(shí)
 * 這樣一來(lái),只有最后一次操作事件處理函數(shù)才被真正的觸發(fā)
 *
 * 一般用于輸入框事件,常用場(chǎng)景就是表單的搜索或者聯(lián)想查詢,
 * 如果不使用防抖會(huì)連續(xù)發(fā)送請(qǐng)求,增加服務(wù)器的壓力
 * 使用防抖后,會(huì)在用戶輸入要查詢的關(guān)鍵詞后才發(fā)送請(qǐng)求，百度搜索就是這么實(shí)現(xiàn)的
 */
function  debounce(method, duration) {
          var timer = null;
         return function(){
            var that = this,
                args = arguments;
            // 在本次調(diào)用之間的一個(gè)間隔時(shí)間內(nèi)若有方法在執(zhí)行,則終止該方法的執(zhí)行
            if(timer) {
              clearTimeout(timer);
            }
            // 開(kāi)始執(zhí)行本次調(diào)用
            timer = setTimeout(function(){
              method.apply(that,args);
            }, duration)

          }

  }

  export default debounce;