✨ 介绍防抖节流原理、区别以及利用，并用JavaScript进行实现
- 防抖
- 原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则从新计时。
实用场景：
- 按钮提交场景：避免屡次提交按钮，只执行最初提交的一次
- 搜寻框联想场景：避免联想发送申请，只发送最初一次输出
// 简易版实现function debounce(func, wait=1000) { let timeout; return function (args) { clearTimeout(timeout) timeout = setTimeout(function(){ func.apply(this, args) }, wait); }}// 立刻执行版实现,有时心愿立即执行函数，而后等到进行触发 n 秒后，才能够从新触发执行。function debounce(func, wait=5000, immediate=true) { let timeout; return function (args) { if (timeout) clearTimeout(timeout); if (immediate) { const callNow = !timeout; timeout = setTimeout(function () { timeout = null; }, wait) if (callNow) func.apply(this, args) } else { timeout = setTimeout(function () { func.apply(this, args) }, wait); } }}/**func函数可能会有返回值，所以须要返回函数后果，然而当 immediate 为 false 的时候因为应用了 setTimeout 咱们将 func.apply(context, args) 的返回值赋给变量最初再 return 的时候，值将会始终是 undefined所以只在 immediate 为 true 的时候返回函数的执行后果*/function debounce(func, wait, immediate) { let timeout, result; return function (args) { if (timeout) clearTimeout(timeout); if (immediate) { const callNow = !timeout; timeout = setTimeout(function () { timeout = null; }, wait) if (callNow) result = func.apply(this, args) } else { timeout = setTimeout(function () { func.apply(this, args) }, wait); } return result; }}- 节流
- 原理：规定在一个单位工夫内，只能触发一次函数。如果这个单位工夫内触发屡次函数，只有一次失效。
实用场景：
- 拖拽场景：固定工夫内只执行一次，避免超高频次触发地位变动
- 缩放场景：监控浏览器resize
/* 应用工夫戳实现应用工夫戳，当触发事件的时候，咱们取出以后的工夫戳，而后减去之前的工夫戳(最一开始值设为 0 )，如果大于设置的工夫周期，就执行函数，而后更新工夫戳为以后的工夫戳，如果小于，就不执行。*/function throttle(func, wait) { let previous = 0; return function (args) { let now = +new Date(); if (now - previous > wait) { func.apply(this, args); previous = now; } }}/*应用定时器实现当触发事件的时候，咱们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，而后执行函数，清空定时器，这样就能够设置下个定时器。*/function throttle(func, wait) { let timeout; return function (args) { if (!timeout) { timeout = setTimeout(function () { timeout = null; func.apply(this, args) }, wait) } }}/** 防抖: * 利用场景：当用户进行了某个行为(例如点击)之后。 不心愿每次行为都会触发办法，而是行为做出后, 一段时间内没有再次反复行为， * 才给用户响应 * 实现原理 : 每次触发事件时设置一个延时调用办法， 并且勾销之前的延时调用办法。 （每次触发事件时都勾销之前的延时调用办法） * @params fun 传入的防抖函数(callback) delay 等待时间 * */const debounce = (fun, delay = 500) => { let timer = null //设定一个定时器 return function (...args) { clearTimeout(timer); timer = setTimeout(() => { fun.apply(this, args) }, delay) }}/** 节流 * 利用场景:用户进行高频事件触发(滚动)， 但在限度在n秒内只会执行一次。 * 实现原理: 每次触发工夫的时候， 判断以后是否存在期待执行的延时函数 * @params fun 传入的防抖函数(callback) delay 等待时间 * */const throttle = (fun, delay = 1000) => { let flag = true; return function (...args) { if (!flag) return; flag = false setTimeout(() => { fun.apply(this, args) flag = true }, delay) }}区别:节流不论事件触发多频繁保障在肯定工夫内肯定会执行一次函数。防抖是只在最初一次事件触发后才会执行一次函数