脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js封装防抖和节流函数

js封装防抖和节流函数使用及说明

 更新时间：2025年12月03日 09:44:09   作者：霸气小男  
防抖和节流是前端优化事件处理的两种技术,防抖通过设置等待时间,只有在指定时间内没有再次触发事件时,才会执行目标函数,节流则是固定时间内只执行一次,无论事件触发多少次,生活类比分别为电梯门倒计时和水龙头限流接水

防抖

实现原理：事件触发后，等待指定时间；若在这段时间内再次触发，则重新计时；直到最后一次触发后超过指定时间，才真正执行目标函数

生活类比：

  • 每次有人进电梯（触发事件），门会重新倒计时 5 秒才关闭
  • 如果 5 秒内又有人进来，重新计时
  • 直到 5 秒内没人再进来，门才真正关闭（执行函数）

常规版

/**
 * @description 防抖
 * @param {*} fn
 * @param {*} delay
 * @return {*}
 */
export const debounce = (fn, delay) => {
	let timer
	return function () {
		const _this = this
		const args = arguments
		if (timer) {
			clearTimeout(timer)
		}
		timer = setTimeout(function () {
			fn.apply(_this, args)
		}, delay)
	}
}

简洁版

const debounce = (fn, d = 300) => {
  let t;
  return (...a) => (clearTimeout(t), t = setTimeout(() => fn(...a), d));
};

如何使用

//引入你封装的防抖文件
import { debounce } from './debounce.js';

const handleSearch = debounce((val)=> {
  console.log(val);
}, 500);

节流

实现原理：固定时间内只执行一次，无论事件触发多频繁，每隔 n 毫秒才执行一次目标函数

生活类比：

  • 把水龙头开到最大，但下方杯子每 1 秒只允许接一次水
  • 1 秒内再怎么开水，杯子也只接一次

常规版

/**
 * @description 节流
 * @param {*} fn
 * @param {*} delay
 * @return {*}
 */
export const throttle = (fn, delay) => {
	let timer
	return function () {
		const _this = this
		const args = arguments

		if (!timer) {
			timer = setTimeout(function () {
				timer = null
				fn.apply(_this, args)
			}, delay)
		}
	}
}

简洁版

const throttle = (fn, d = 300) => {
  let t;
  return (...a) => {
    if (!t) t = setTimeout(() => (t = null, fn(...a)), d);
  };
};

如何使用

//引入你封装的节流文件
import { throttle } from './throttle.js';

const handleScroll = throttle(function (e) {
  console.log(e);
}, 300);

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论