<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>函數節流與防抖</title> </head> <body> <button id="handle">測試不做函數節流/防抖</button> <button id="throttle">測試函數節流</button> <button id="debounce">測試函數防抖</button> <!-- 1. 事件頻繁觸發可能造成的問題? 1). 一些瀏覽器事件:window.onresize、window.mousemove等，觸發的頻率非常高，會造成瀏覽器性能問題 2). 如果向后台發送請求，頻繁觸發，對服務器造成不必要的壓力 2. 如何限制事件處理函數頻繁調用 1). 函數節流 2). 函數防抖 3. 函數節流(throttle) 1). 理解: 在函數需要頻繁觸發時: 函數執行一次后，只有大於設定的執行時間后才會執行第二次 適合多次事件按時間做平均分配觸發 2). 場景： 窗口調整（resize） 頁面滾動（scroll） DOM 元素的拖拽功能實現（mousemove） 搶購瘋狂點擊（click） 4. 函數防抖(debounce) 1). 理解: 在函數需要頻繁觸發時: 在規定時間內，只讓最后一次生效，前面的不生效。 適合多次事件一次響應的情況 2). 場景： 輸入框實時搜索聯想（keyup/input） --> <script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.js"></script> <script> /* 處理點擊事件的回調函數 */ function handleClick(event) { // 處理事件的回調 console.log('處理點擊事件', this, event) } // document.getElementById('handle').onclick = handleClick /* _.throttle(handleFn, delay, options)返回一個新函數, 就是綁定事件監聽的回調函數(它是高頻調用) handleFn: 真正處理事件的回調函數, 由throttle()返回的函數內部間隔指定的dalay時間后調用(少量調用) _.debounce()語法一樣 // */ // 每隔2s觸發一次handleClick，節流操作 document.getElementById('throttle').onclick = _.throttle(handleClick, 2000) //執行最后一次的handleClick，防抖操作 document.getElementById('debounce').onclick = _.debounce(handleClick, 2000) </script> </body> </html>
vue方式
1. 引入lodash,腳手架中已經安裝了lodash，
// import _ from 'lodash' //引入整體打包體積比較大
import throttle from "lodash/throttle"; //只是引入節流功能
對li標簽添加屬性
@mouseenter="moveIn(index)"，移入效果，采用節流方式
methods: { moveIn: throttle( function(index) { console.log(index); this.currentIndex = index; }, 50, { trailing: false } ), //{ 'trailing': true } 拖延觸發，節流操作函數觸發如果是true，那么是在規定時間結束之后觸發 //{ 'trailing': false } 不拖延觸發，節流操作函數觸發如果是false，那么是在規定時間開始就觸發 },
