防抖和节流是防止高频率触发的事件
防抖，一般用在使用
onresize事件（onresize：当浏览器被重置大小时执行Javascript代码）、
oninput事件：在用户输入时触发。
如果事件进行高频率触发，很可能会导致服务器崩溃
那么就可以使用函数防抖进行优化，比如你乘坐电梯，如果十秒钟之内有人进入或者出去，那么十秒钟就会重新开始计时，直到十秒之内都不在有人流动才会关门
那么节流就不一样了：同样是电梯十秒运作，电梯的机制是当人进入电梯 后，十秒钟内自动关门，这十秒钟内人可以进出，当到了十秒钟后，不管你有没有人进入出去都直接关门，准时运作。
函数节流简单理解
每隔一段时间执行一次
函数防抖简单理解
每当事件触发一次，就会重置定时器，一直到最后一次触发事件，再去执行
防抖一般用于触发input事件
例如：
<body> 请输入信息：<input type="text"> <script> var input =document.querySelector('input'); input.oninput = function(){ console.log('事件被触发'); } </script> </body>
效果如下：
我们在输入文字时，每次输入都会发送请求，这样中间的很多东西没有必要给后端，给了的话对服务器的压力非常大，那么在这里可以使用函数防抖来进行优化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text"> <script> var input = document.querySelector('input'); function debounce(callBack, time) { var timer = null; return function () { if (timer) { clearTimeout(timer) } timer = setTimeout(callBack,time); } } function fn2() { console.log('防抖'); } input.addEventListener('input',debounce(fn2,1000)) </script> </body> </html> 进行优化过后： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>防抖优化</title> </head> <body> 请输入信息：<input type="text"> <script> var processor = { timeoutId: null, performProcessing: function() { var days = new Date() var a= days.getHours(); var b= days.getMonth(); var c= days.getSeconds(); var d= days.getMilliseconds(); console.log(a+'时'+b+'分'+c+'秒'+d+'毫秒'); }, process: function() { var that = this; clearTimeout(that.timeoutId); that .timeoutId = setTimeout(function() { that.performProcessing(); }, 500) //每隔500毫秒后执行，如果中间间隔没到五秒钟还在输入，那么这500毫秒将重新开始计算 } }; document.querySelector('input').oninput = function() { processor.process(); } </script> </body> </html>
效果如下图所示：
节流
原理：规定一个时间，在这个时间段内的所有事件都会一起被执行
一般用于：resize，touchmove移动DOM，上拉列表加载数据等
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text"> <script> var input = document.querySelector('input'); function fn1(callback,time){ var flag = true; return function(){ if (flag) { flag = false; callback(); setTimeout(()=>{ flag = true },time) } } } function fn2(){ console.log('节流'); } input.addEventListener('input',fn1(fn2,1000)) </script> </body> </html>
效果为每个一秒节流一次
扩展例子如下：
<body> <div> 加入节流-定时器 & 时间戳：<input type="text" id="throttle"/> </div> <script> window.onload = () => { function ajax (data) { console.log(new Date().toLocaleTimeString() + ' - ' + data) } function throttle(fn, delay) { let last return args => { let now = Date.now() if (last && now < last + delay) { clearTimeout(fn.id) fn.id = setTimeout(() => { fn.call(this, args) last = now }, delay) } else { fn.call(this, args) last = now } } } const throttleAjax = throttle(ajax, 1000) document.querySelector('#throttle').addEventListener('keyup', e => { throttleAjax(e.target.value) }) } </script> </body>
