网站做的最好的公司,深圳百度公司地址,网站制作好公司,电子商务类网站模板一、防抖#xff08;Debounce#xff09;
一种用于优化性能和减少不必要请求的技术。
防抖函数会延迟触发某个事件处理函数#xff0c;并在一段时间内只执行一次。如果在延迟时间内多次触发了同一个事件#xff0c;防抖函数会取消之前的延迟执行#xff0c;并重新开始计…一、防抖Debounce
一种用于优化性能和减少不必要请求的技术。
防抖函数会延迟触发某个事件处理函数并在一段时间内只执行一次。如果在延迟时间内多次触发了同一个事件防抖函数会取消之前的延迟执行并重新开始计时直到延迟时间内没有新的触发最后才执行一次事件处理函数。
限制某个函数在一定时间内被频繁调用以减少不必要的计算和网络请求。
需要防抖的主要原因有以下几点
限制函数的触发频率当某个函数被频繁触发时可以使用防抖来降低函数的调用频率以避免过多的计算或网络请求。优化用户体验例如在用户进行输入、滚动窗口、拖拽等交互操作时防抖可以确保最终只触发一次处理函数避免频繁更新界面。
防抖的应用场景有很多主要包括
表单验证当用户输入框输入内容时使用防抖来验证输入的合法性。搜索框联想搜索当用户在搜索框中输入时触发搜索事件的处理函数。由于用户的输入可能连续几次触发使用防抖函数可以避免频繁的搜索请求只在用户输入结束后触发一次搜索。窗口调整当用户调整浏览器窗口大小时触发窗口大小变化事件的处理函数。使用防抖函数可以有效控制窗口调整事件的频率避免过多的布局计算和页面重绘。按钮点击当用户频繁点击一个按钮时使用防抖来限制点击次数防止多次提交。 页面滚动当用户滚动页面时触发滚动事件的处理函数但由于滚动事件的触发频率很高使用防抖函数可以减少处理函数的触发次数减轻浏览器的工作负担。
下面是一个防抖的示例代码
function debounce(func, delay) {let timer;return function() {clearTimeout(timer);timer setTimeout(() {func.apply(this, arguments);}, delay);};
}// 示例使用
const searchInput document.getElementById(searchInput);function search() {// 处理搜索逻辑
}const debounceSearch debounce(search, 500);
searchInput.addEventListener(input, debounceSearch);在上述代码中debounce函数接受一个函数func和延迟时间delay作为参数返回一个新的函数。这个新函数在被调用时会先清除之前的定时器然后再设置一个新的定时器来延迟调用原始函数func。这样当被防抖的事件频繁触发时只有最后一次触发的事件会真正执行处理函数search在前面的事件触发而未执行时定时器会被不断清除和重设以保证函数的调用频率符合预期。
let timeout null;
/**
*防抖原理一定时间内只有最后一次操作再过wait毫秒后才执行函数
*
*param {Function} func 要执行的回调函数
*param {Number} wait 延时时间
*param {Boolean} immediate 是否立即执行
*return null
*/
export function debounce(func, wait 500, immediate false){//清除定时器if(timeout ! null) clearTimeout(timeout);//立即执行此类情况一般用不到if(immediate){var callNow !timeout;timeout setTimeout(function(){timeout null;},wait);if(callNow) typeof func function func();} else {//设置定时器当最后一次操作后timeout不会再被清除在延时wait毫秒后执行func回调函数timeout setTimeout(function() {typeof func function func();},wait);}
}
二、节流Throttle
前端节流是一种限制函数执行频率的技术。节流函数会在一定时间间隔内对函数的多次调用进行限制确保在该时间间隔内函数只会执行一次。
通常情况下当一个事件被频繁地触发时如果不进行节流处理可能会导致函数被连续执行多次消耗过多的资源甚至影响用户体验。通过节流技术我们可以控制函数的执行频率以便在一定时间段内只执行一次或者少量次。
节流函数的主要应用场景包括 按钮点击当用户频繁点击按钮时使用节流函数可以防止多次响应确保只执行一次点击事件的处理函数。 页面滚动当用户滚动页面时触发滚动事件的处理函数。使用节流函数可以限制滚动事件的触发频率减少处理函数的调用次数提高性能。 输入框输入当用户在输入框中输入时触发输入事件的处理函数。使用节流函数可以延迟触发处理函数减少函数调用次数避免频繁的数据处理或请求发送。
let timer, flag;
/**
*节流原理在一定时间内只能触发一次
*param {Function} func 要执行的回调函数
*param {Number} wait 延时时间
*param {Boolean} immediate 是否立即执行
*return null
*/
function throttle(func, wait 500, immediate true){if(immediate){if(!flag){flagtrue;//如果是立即执行则在wait毫秒内开始时执行typeof func function func();timer setTImeout(() {flag false;},wait);}}else{if(!flag){flag true;//如果是非立即执行则在wait毫秒内的结束处执行timer setTimeout(() {flag falsetypeof func function func();},wait);}}
}
三、如何选择
选择防抖还是节流需要根据具体的情况和需求来决定。一般来说 如果需要在事件连续触发的期间只执行最后一次操作可以选择使用防抖。适合于按钮点击、输入框输入等需要避免频繁触发的场景。 如果需要在一定时间间隔内对函数调用进行限制确保在该时间间隔内函数只执行一次可以选择节流。适合于页面滚动、鼠标移动等需要控制函数执行频率的场景。
选择防抖还是节流取决于实际的需求和用户体验。一般来说
如果你需要确保用户停止操作后才执行函数那么选择防抖会更合适因为防抖会等待一段时间后执行函数可以避免不必要的执行。如果你需要控制函数的执行频率以避免频繁的操作那么选择节流会更合适因为节流可以限制在一定时间内只执行一次函数。
选择防抖还是节流时需要考虑以下几个因素 实际需求确定需要限制函数执行频率的目的是什么是为了优化性能还是为了避免重复操作。 用户体验考虑用户交互的流畅性和响应速度。如果操作需要立即响应则可能更适合使用防抖如果操作不需要实时响应而是在一定时间间隔内进行处理那么节流可能更适合。 函数执行时机确定函数应该在触发事件的开始时或结束时执行。防抖通常在事件结束后执行而节流则可以在事件开始或结束时执行。
思考以上因素可以根据实际需求选择适合的防抖或节流。如果不确定也可以根据具体情况进行性能测试和用户体验测试以确定最佳的选择。
