事件频繁触发可能造成的问题?
一些浏览器事件:window.onresize、window.mousemove等，触发的频率非常高，会造成界面卡顿
如果向后台发送请求，频繁触发，对服务器造成不必要的压力
如何限制事件处理函数频繁调用
函数节流
函数节流(throttle)
理解:
在函数需要频繁触发时: 函数执行一次后，只有大于设定的执行周期后才会执行第二次
适合多次事件按时间做平均分配触发
场景：
窗口调整（resize）
页面滚动（scroll）
DOM 元素的拖拽功能实现（mousemove）
抢购疯狂点击（click）
throttle() 节流
语法: throttle(callback, wait)
功能: 创建一个节流函数，在 wait 毫秒内最多执行 callback 一次
编码实现
/* 实现函数节流 - 语法: throttle(callback, wait) - 功能: 创建一个节流函数，在 wait 毫秒内最多执行 `callback` 一次 */ export function throttle(callback, wait) { let start = 0 // 返回一个事件监听函数(也就是节流函数) return function (event) { console.log('throttle event') // 只有当距离上次处理的时间间隔超过了wait时, 才执行处理事件的函数 const current = Date.now() if ( current - start > wait) { callback.call(this, event) // 需要指定this和参数 start = current } } }
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数节流与防抖</title> </head> <body> <button id="handle">正常处理</button> <button id="throttle">测试函数节流</button> <script src="https://www.qianduan.cn/data/public/js/throttle.js"></script> <script> /* 处理点击事件的回调函数 */ function handleClick(event) { // 处理事件的回调 console.log('处理点击事件', this, event) } document.getElementById('handle').onclick = handleClick document.getElementById('throttle').onclick = aUtils.throttle(handleClick, 2000) </script> </body> </html>
