北京房山网站建设,取公司名大全 最新版,一级A视网站 一级做爰片,沈阳建设工程管理信息网Js面试之防抖与节流 防抖节流二者区别触发方式不同执行时间点不同 适用场景不同 最近在整理一些前端面试中经常被问到的问题#xff0c;分为vue相关、react相关、js相关、react相关等等专题#xff0c;可持续关注后续内容#xff0c;会不断进行整理~ 防抖#xff08;Deboun… Js面试之防抖与节流 防抖节流二者区别触发方式不同执行时间点不同 适用场景不同 最近在整理一些前端面试中经常被问到的问题分为vue相关、react相关、js相关、react相关等等专题可持续关注后续内容会不断进行整理~ 防抖Debounce和节流Throttle是两种常见的 JavaScript 性能优化技巧主要用于限制某个函数的执行频率以避免过度频繁地触发。
防抖
防抖的基本思想是将多个连续的函数调用合并成一次单一的函数调用。具体实现方式是设置一个定时器在指定的时间间隔内如果有新的函数调用触发则清除之前的定时器并重新设置。这样只有当函数调用的间隔大于设定的时间间隔时函数才会被执行。
function debounce(func, delay) {let timer;return function (...args) {clearTimeout(timer);timer setTimeout(() {func.apply(this, args);}, delay);};
}// 使用
const debouncedFunction debounce(() {console.log(Debounced function is executed);
}, 200);// 在需要防抖的地方调用debouncedFunction节流
节流的基本思想是规定一个单位时间在这个单位时间内只能执行一次函数。如果在该单位时间内触发了多次函数调用只有一次会被执行其他会被忽略。
function throttle(func, delay) {let lastExecTime 0;return function (...args) {const now Date.now();if (now - lastExecTime delay) {func.apply(this, args);lastExecTime now;}};
}// 使用
const throttledFunction throttle(() {console.log(Throttled function is executed);
}, 200);// 在需要节流的地方调用throttledFunction二者区别
触发方式不同
防抖是在最后一次函数调用后经过一段时间才执行。节流是每隔一段时间执行一次函数。
执行时间点不同
防抖在最后一次函数调用后经过一定时间执行。节流是在每个单位时间内的第一次调用执行。
适用场景不同
防抖适用于用户输入例如搜索框避免连续快速触发导致频繁请求。节流适用于高频事件例如滚动、拖拽确保一定时间内只执行一次控制函数的执行频率。
