JS篇 - 节流和防抖

最新推荐文章于 2024-07-20 14:49:34 发布

社恐分子Σ(っ °Д °;)っ

最新推荐文章于 2024-07-20 14:49:34 发布

阅读量139

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_42828458/article/details/115912892

版权

本文探讨JavaScript中的两种重要性能优化技术——防抖和节流。防抖技术在用户停止触发函数一段时间后执行，常用于search联想搜索和window.resize事件。节流则确保在设定时间内只执行一次函数，适用于鼠标点击和滚动事件处理。文章提供了支持立即执行、取消功能和自定义选项的防抖与节流实现。

摘要由CSDN通过智能技术生成

防抖

定义：动作停止后的时间超过设定的时间时执行一次函数。

这里的动作停止标识你停止了出发这个函数，从这个时间点开始计算，但间隔时间等于你设定的时间，才会执行里面的回调函数。若你一直在触发这个函数并且两次触发间隔小于设定时间，则函数一直不会执行。

应用场景：
1. search联想搜索，用户在不断输入值是，用防抖来节约请求资源；
2. window触发resize的时候，不断地调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次。

function debance(fn,delay){
   
	let timer = null;
	return ()=>{
   
		if(timer){
   
			clearTimeout(timer);
		}
		timer = setTimeout(()=>{
   
			fn();
		},delay);
	}
}
window.addEventListener(
	'scroll',
	debance(()=>{
   console.log(1111)},1000)
)

最终版：除了支持 this 和 event 外，还支持以下功能：
支持立即执行；
函数可能有返回值；
支持取消功能；

function debounce(func, wait, immediate) {
   
    var timeout, result;
    
    var debounced = function () {
   
        var context = this;
        var args = arguments;
        
        if (timeout) clearTimeout(timeout);
        if