16- 节流与防抖

48 阅读1分钟

实现节流

节流功能:连续的触发某个函数,只会以固定的频率去执行

	/**
	**@param{fn: function} 需要节流的函数
	**@param{interval: number} 函数触发的频率
	*/
	const throttle = (fn, interval) => {
		// 记录上一次触发函数时的时间,初始值为0
		let lastTime  = 0
		return function (...args) {
			// 获取现在的时间
			const nowTime = new Date().getTime()
			// 如果现在的时间减去上次触发的事件大于等于interval,则可以执行函数了
			if(nowTime - lastTime >= interval){
				fn.apply(this, args)
				// 将上次触发函数的时间赋值成当前时间
				lastTime = nowTimes
			}
		}
	}

实现防抖

防抖功能 :连续的触发某个函数,只会执行最后触发的那一次。

	/**
	**@param{fn: function} 需要防抖执行的函数
	**@param{delay: number} 延迟时间
	*/
	const debounce = (fn, delay = 500) => {
		// 存储定时器的timerId
		let timer = null
		return function(...args) {
			
			// 在每一次调用函数时,都清除上一次的定时器
			if (timer) clearTimeout(timer)
			// 开启一个定时器
			timer = setTimeout(() => {
				fn.apply(this, args)
        clearTimeout(timer)
			}, delay)
		}
	}