一、回答点
防抖:事件被触发n秒后执行回调
节流:在规定一个时间段内,只能触发一次事件的回调函数
二、深入回答
节流和防抖的理解
- 防抖:在事件被触发n秒后执行回调,如果在n秒内事件再次被触发,会重新计算时间;可使用在点击事件上,避免用户多次点击向后端发送多次网络请求.
- 节流:在规定一个时间段内,只能触发一次事件的回调函数,如果在这个时间段内事件被多次触发,只会生效一次;可以用在页面滚动等事件监听上,通过节流来降低事件调用的频率.
防抖应用场景:
- 按钮:防止多次点击按钮,只执行一次.
- 服务端:表单验证需服务端进行配合,只执行一段输入的事件的最后一次;搜索框的联想词.
节流应用场景:
- 拖拽:固定时间内只执行一次,防止高频率触发.
- 缩放:监控resize.
- 动画:固定时间内多次触发动画.
实现节流和防抖
简易版手撸节流函数
function throttle(fn, delay) { let curTime = Date.now(); return function() { let ctx = this, args = arguments, nowTime = Date.now(); // 如果两次时间间隔超过了指定时间，则执行函数。 if (nowTime - curTime >= delay) { curTime = Date.now(); return fn.apply(ctx, args); } }; }
简易版手撸防抖函数
function debounce(fn, wait) { let timer = null; return function() { let ctx = this, args = arguments; // 如果此时有定时器的话,取消之前的定时器重新记时 if (timer) { clearTimeout(timer); timer = null; } // 设置定时器,让事件间隔指定时间后执行 timer = setTimeout(() => { fn.apply(ctx, args); }, wait); }; }
困难版手撸节流函数
function throttle(fn, interval, options = { leading: true, trailing:false }) { // 记录开始时间 const { leading,trailing,resultCallBack } = options let endTime = 0 let timer = null // 触发,执行函数 const _throttle = function(...args) { return new Promise((resolve, reject) => { // 获取当前时间触发的时间 const newTime = new Date().getTime() if (!endTime && !leading) endTime = newTime // 使用触发的事件和之前的时间间隔及开始时间,计算出 还剩多长时间需要去触发函数 const remainTime = interval - (newTime - endTime) if (remainTime <= 0){ if (timer) { clearTimeout(timer) timer = null } // 触发函数 const result = fn.apply(this, args) if (resultCallBack) resultCallBack (result) resolve(result) // 保留上次触发时间 endTime = newTime return } if (trailing && !timer) { timer = setTimeout(() => { timer = null endTime = !leading ? 0 : new Date().getTime() const result = fn.apply(this, args) if (resultCallBack) resultCallBack(result) resolve(resolve) },remainTime) } }) } _throttle.cancel = function() { if(timer) clearTimeout(timer) timer = null endTime = 0 } return _throttle }
困难版手撸防抖函数
function debounce(fn, delay, immediate = false, resultCallback) { // 1.定义一个定时器, 保存上一次的定时器 let timer = null let invoke = false // 2.真正执行的函数 const _debounce = function(...args) { return new Promise((resolve, reject) => { // 取消上一次的定时器 if (timer) clearTimeout(timer) // 判断是否需要立即执行 if (immediate && !invoke) { const res = fn.apply(this, args) if (resultCallback) resultCallback(res) resolve(res) invoke = true } else { // 延迟执行 timer = setTimeout(() => { // 外部传入的真正要执行的函数 const res = fn.apply(this, args) if (resultCallback) resultCallback(res) resolve(res) invoke = false timer = null }, delay) } }) } // 取消功能 _debounce.cancel = function() { console.log(timer) if (timer) clearTimeout(timer) timer = null invoke = false } return _debounce }
