概念理解：
1 函数防抖(debounce)：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。如：手机号、邮箱验证输入检测；window触发resize；文本输入验证。
2 函数节流（throttle)：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。如：鼠标不断点击；监听滚动事件；搜索联想；
函数防抖与函数节流区别：函数防抖是某一段时间只执行一次，而函数节流是间隔时间执行。
代码实现：
函数防抖
1 function debounce(fn, delay) { 2 let timer; 3 return function () { 4 let _this = this, args = arguments; // 赋值解决：函数运行时会改变内部this的指向问题 5 if (timer) { clearTimeout(timer); } 6 timer = setTimeout(function () { 7 console.log(args); 8 9 fn.apply(_this, arguments); 10 }, delay) 11 } 12 } 13 14 function testDebounce(e, content) { // test 15 console.log(e, content); 16 } 17 let DebounceFn = debounce(testDebounce, 1000); // 防抖函数 18 19 document.onmousemove = function (e) { 20 DebounceFn(e, ‘debounce‘); // 给防抖函数传参 21 }
函数节流：
1 function throttle(fn, delay) { 2 let timer; 3 return function () { 4 let _this = this, args = arguments; 5 if (timer) { return; } 6 timer = setTimeout(function () { 7 fn.apply(_this, args); 8 timer = null; 9 }, delay); 10 } 11 } 12 function testThrottle(e, content) { 13 console.log(e, content); 14 } 15 16 let testThrottleFn = throttle(testThrottle, 1000); // 节流函数 17 18 document.onmousemove = function (e) { 19 testThrottleFn(e, ‘throttle‘); 20 }