转载 前言 js防抖和节流函数不仅是前端面试中经常问到的问题，也是我们平常开发中频繁处理dom事件时会用到的。 在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数频繁调用，会加重浏览器的的负担，导致用户体验非常糟糕。此时，我们就可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。
一、函数防抖 函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会触发scroll事件。 在这里插入图片描述
如何实现
<button id="btn">按钮</button> function debounce(fn,delay) { //记录上一次的计时器 var timer = null; return function(){ //清除上一次的计时器 clearTimeout(timer) timer = setTimeout(function(){ fn.apply(this) },delay) } } document.getElementById('btn').onclick = debounce(function(){ console.log('点击事件被触发'+Date.now()); },1000)2.函数防抖的应用场景
对于连续的事件响应我们只需要执行一次回调：
每次 resize/scroll 触发统计事件 按钮点击事件
二、函数节流 函数节流（throttle）：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。
如何实现 html,body{ height: 500%; } function throttle(fn,delay) { //记录上一次触发的时间 var lastTime = 0; return function(){ //记录当前函数触发的时间 var nowTime = Date.now(); if(nowTime - lastTime > delay){ //修正this问题 fn.call(this); //同步时间 lastTime = nowTime; } } } document.onscroll = throttle(function () { console.log('scroll事件触发'+Date.now()); },200)2.函数节流的应用场景
需要间隔一定时间触发回调来控制函数使用频率：
DOM 元素的拖拽功能实现（mousemove） 计算鼠标移动的距离（mousemove） onScoll 最后 用一句话总结防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行。
