首先得明确防抖和节流解决了：事件处理函数调用的频率无限度，减轻浏览器的累赘，导致用户体验十分差，甚至卡死
一、防抖(debounce)
概念
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则从新计时；
简而言之就是执行屡次操作事件只在规定的工夫内只执行最初一次
利用场景
- 文本框输出搜寻（间断输出时防止屡次申请接口）
- 在进行窗口的resize、scroll监听操作
高频点击提交，表单反复提交
实现原理
设置一个定时器，在指定工夫距离内运行代码时，革除上一次的定时器，并设置新的定时器，直到函数申请进行并超过工夫距离才会执行。
代码示例
- 实现文本框输出搜寻
先看下没应用防抖的操作：
不应用防抖的状况： <input type="text" id="search" /> <script> const searchHandle = document.getElementById("search"); searchHandle.addEventListener("input", function () { console.log(this.value); }); </script>很显著，如果始终监听输出值查问接口的话，那必然会呈现性能问题！
应用防抖的操作：
应用防抖的状况： <input type="text" id="search" /> <script> const searchHandle = document.getElementById("search"); function debounce(func, delay) { let timer = null; return function () { if (timer) clearTimeout(timer); // 每次监听输出值，都会去判断是否还有timer，有就革除timer timer = setTimeout(() => { func.call(this); }, delay); }; } searchHandle.addEventListener('input', debounce(function () { console.log(this.value); }, 600) ); </script>很显然在指定的工夫内只容许最初一次查问，这样就大大减少了服务器查问压力
- 监听滚动条事件
function debounce(fn, wait) { var timeout = null; return function () { if (timeout !== null) clearTimeout(timeout); timeout = setTimeout(fn, wait); }; } function handle() { console.log(Math.random()); } window.addEventListener("scroll", debounce(handle, 1000));和下面的表单搜寻查问原理一样，都是监听操作事件，在规定的工夫内只容许函数触发最初一次
一、节流(throttle)
概念
当继续触发事件时，保障在肯定工夫内只调用一次事件处理函数；
也就是说：始终触发函数，且每次触发小于给定值，函数节流会每隔这个工夫调用一次
防抖与节流的区别
防抖是将屡次执行变为最初一次执行，节流是将屡次执行变为每隔一段时间执行
利用场景
- 懒加载要监听计算滚动条的地位，应用节流按肯定工夫的频率获取。
- 计算鼠标挪动的间隔
- DOM 元素的拖拽性能
- 搜寻查问等
实现原理
次要有两种办法：工夫戳和定时器
设定一个定时器，调用函数，如果调用函数在给定的一段时间内，那就每隔给定的时间段内执行一次函数
代码示例
- 表单搜寻查问
const search = document.getElementById("search"); function input(val) { console.log(val); } function throttle(fun, delay) { let last, timer; return function (args) { const that = this; const now = +new Date(); /* 以delay为基准，比照上一次(last)的操作工夫和以后工夫是否在上次操作(last)和delay工夫范畴内; 如果在范畴内，那就革除上次定时器函数操作，开始一个新的定时器函数操作，往返循环 */ if (last && now < last + delay) { clearTimeout(timer); timer = setTimeout(function () { fun.call(that, args); }, delay); } else { last = now; fun.call(that, args); } }; } const throttleInput = throttle(input, 1000); search.addEventListener("input", function (e) { throttleInput(e.target.value); });能够看到在始终输出的状况下每隔一段时间会触发一次函数
- 监听滚动条事件
function throttle (func, delay) { var timer = null; var startTime = Date.now(); return function () { let curTime = Date.now(); let remaining = delay - (curTime - startTime); //剩余时间 let _this = this; clearTimeout(timer); if (remaining <= 0) { // 第一次触发立刻执行 func.apply(_this, arguments); startTime = Date.now(); } else { timer = setTimeout(func, remaining); //勾销以后计数器并计算新的remaining } }; }; function handle() { console.log(Math.random()); } window.addEventListener("scroll", throttle(handle, 1000));总结
- 防抖和节流都是为了解决频繁触发某个事件的状况造成的性能耗费。
- 防抖就是在触发后的一段时间内执行最初一次，如：在进行搜寻的时候，当用户进行输出后调用办法，节约申请资源
- 节流就是在频繁触发某个事件，每隔一段时间申请一次，如：打游戏的时候长按某个按键，动作是有法则的在间隔时间触发一次