一、事件频繁触发可能造成的问题?
- 一些浏览器事件:window.onresize、window.mousemove等，触发的频率十分高，会造成浏览器性能问题
- 如果向后盾发送申请，频繁触发，对服务器造成不必要的压力
二、如何限度事件处理函数频繁调用
- 函数节流
- 函数防抖
三、函数节流(throttle)
了解:
- 在函数须要频繁触发时: 函数执行一次后，只有大于设定的执行周期后才会执行第二次- 适宜屡次事件按工夫做平均分配触发场景：
- 窗口调整（resize）- 页面滚动（scroll）- DOM 元素的拖拽性能实现（mousemove）- 抢购疯狂点击（click）
四、函数防抖(debounce)
了解:
- 在函数须要频繁触发时: 在规定工夫内，只让最初一次失效，后面的不失效。- 适宜屡次事件一次响应的状况场景：
- 输入框实时搜寻联想（keyup/input）
五、封装
- 函数节流-封装
/* 用来返回节流函数的工具函数 */ function throttle(callback, delay) { let pre = 0 // 默认值不要是Date.now() ==> 第1次事件立刻调用 return function (event) { // 节流函数/真正的事件回调函数 this是产生事件的标签 const current = Date.now() if (current - pre > delay) { // 只有离上一次调用callback的时间差大于delay // 调用真正处理事件的函数, this是事件源, 参数是event callback.call(this, event) // 记录此次调用的工夫 pre = current } } } // 应用封装的节流函数 document.addEventListener('scroll',throttle(function() { console.log('这是带有大量计算的函数') },2000))- 函数防抖-封装
/* 用来返回防抖函数的工具函数 */ function debounce(callback, delay) { return function (event) { // 如果上次事件还没有真正解决, 勾销它 // if (callback.timeoutId) { // 会查找原型链 if (callback.hasOwnProperty('timeId')) { // 不会查找原型链 // 革除 clearTimeout(callback.timeId) } // 发事件产生指定事件后才调用处理事件的回调函数 // 启动定时器, 只是筹备真正解决 callback.timeId = setTimeout(() => { // 正在处理事件 callback.call(this, event) // 删除筹备解决的标记 delete callback.timeId }, delay) } } // 应用封装的防抖函数 document.querySelector('.input').addEventListener('input',debounce((e)=>{ console.log(e.target.value) },1000)) ## 六、间接应用
- 函数节流-间接应用
// 定义一个记录时间的变量 let flagTime = Date.now() // 间接应用函数节流 document.addEventListener('scroll',function(e) { let current = Date.now() // 示意1000毫秒执行一次 if(current-flagTime<1000) return // 执行代码 console.log('我是带有大量计算的函数') // 最初批改原来的工夫 flagTime = current })- 函数防抖-间接应用
document.querySelector('.input').addEventListener('input',function(e) { // 判断this.timeId是否有值 if(this.timeId) { // 有就革除定时器 clearInterval(this.timeId) } // 为 this.timeId赋值,定时器示意1000毫秒内触发了input事件就不执行,只有超过了1000毫秒才执行 this.timeId = setTimeout(()=>{ console.log(e.target.value) },1000)})