概念
函数防抖和函数节流，两者都是优化高频率执行js代码的一种伎俩。
防抖
概念 : 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会从新计算函数执行工夫。
<button id="debounce">点我防抖！</button>$('#debounce').on('click', debounce());function debounce() { let timer; return function () { clearTimeout(timer); timer = setTimeout(() => { // 须要防抖的操作... console.log("防抖胜利！"); }, 500); }}函数防抖的利用场景，最常见的就是页面滚动条监听的例子，来进行解析：
let timer;window.onscroll = function () { clearTimeout(timer); timer = setTimeout(function () { //滚动条地位 let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log('滚动条地位：' + scrollTop); }, 200)}防抖函数的封装应用
/** * 防抖函数 * @param fn 事件触发的操作 * @param delay 多少毫秒内间断触发事件，不会执行 * @returns {Function} */function debounce(fn,delay) { let timer = null; return function () { let self = this, args = arguments; timer && clearTimeout(timer); timer = setTimeout(function () { fn.apply(self,args); },delay); }}window.onscroll = debounce(function () { let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log('滚动条地位：' + scrollTop);},200)节流
概念: 指定工夫距离内只会执行一次工作（肯定工夫内js办法只跑一次）
<button id="throttle">点我节流！</button>$('#throttle').on('click', throttle());function throttle(fn) { let flag = true; return function () { if (!flag) { return; } flag = false; setTimeout(() => { console.log("节流胜利！"); flag = true; }, 1000); };}图片形容:
函数节流利用的理论场景，依据文本框中输出的内容主动申请后盾数据
上面是节流函数的封装与应用：
<input type="text" value="" id="input">$('#input').on('keyup', throttle(function () { console.log($(this).val()); // ajax后盾申请....}, 1000));/** * 节流函数 * @param fn 事件触发的操作 * @param delay 距离多少毫秒须要触发一次事件 */function throttle(fn, delay) { let flag = true; return function () { let self = this, args = arguments; if (!flag) { return; } flag = false; setTimeout(() => { fn.apply(self, args); flag = true; }, delay); }}