最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

js封裝防抖和節(jié)流函數(shù)使用及說明

 更新時(shí)間：2025年12月03日 09:44:09   作者：霸氣小男  
防抖和節(jié)流是前端優(yōu)化事件處理的兩種技術(shù),防抖通過設(shè)置等待時(shí)間,只有在指定時(shí)間內(nèi)沒有再次觸發(fā)事件時(shí),才會(huì)執(zhí)行目標(biāo)函數(shù),節(jié)流則是固定時(shí)間內(nèi)只執(zhí)行一次,無論事件觸發(fā)多少次,生活類比分別為電梯門倒計(jì)時(shí)和水龍頭限流接水

防抖

實(shí)現(xiàn)原理：事件觸發(fā)后，等待指定時(shí)間；若在這段時(shí)間內(nèi)再次觸發(fā)，則重新計(jì)時(shí)；直到最后一次觸發(fā)后超過指定時(shí)間，才真正執(zhí)行目標(biāo)函數(shù)

生活類比：

  • 每次有人進(jìn)電梯（觸發(fā)事件），門會(huì)重新倒計(jì)時(shí) 5 秒才關(guān)閉
  • 如果 5 秒內(nèi)又有人進(jìn)來，重新計(jì)時(shí)
  • 直到 5 秒內(nèi)沒人再進(jìn)來，門才真正關(guān)閉（執(zhí)行函數(shù)）

常規(guī)版

/**
 * @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);

節(jié)流

實(shí)現(xiàn)原理：固定時(shí)間內(nèi)只執(zhí)行一次，無論事件觸發(fā)多頻繁，每隔 n 毫秒才執(zhí)行一次目標(biāo)函數(shù)

生活類比：

  • 把水龍頭開到最大，但下方杯子每 1 秒只允許接一次水
  • 1 秒內(nèi)再怎么開水，杯子也只接一次

常規(guī)版

/**
 * @description 節(jié)流
 * @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);
  };
};

如何使用

//引入你封裝的節(jié)流文件
import { throttle } from './throttle.js';

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

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論

德安县| 罗田县| 泾源县| 盐城市| 镇安县| 东阳市| 道真| 长丰县| 通海县| 宜兰市| 施秉县| 景泰县| 日照市| 垣曲县| 太仆寺旗| 武城县| 英德市| 高台县| 盱眙县| 张家港市| 龙游县| 石林| 民丰县| 平陆县| 疏勒县| 梧州市| 融水| 岳阳市| 栾城县| 腾冲县| 齐河县| 定边县| 略阳县| 股票| 临颍县| 六盘水市| 永康市| 夏邑县| 彰化市| 民丰县| 来安县|