throttle(节流)和debounce(防抖)

防抖和节流都是用来控制频繁调用的问题，但是这两种的应用场景是有区别的。

throttle(节流)

有一个调用周期，在一个很长的时间里分为多段，每一段执行一次。例如onscroll,resize，500ms执行一次

// 使用时间差

function throttle (fun, wait) {

	let previous = 0

	return function (...args) {

		let now = Date.now()

		let context = this

		if (now - previous > wait) {

			fun.apply(context, args)

			previous = now

		}

	}

}

// 使用定时器

function throttle1 (func, wait) {

	let timeout

	return function (...args) {

		let context = this

		if (!timeout) {

			timeout = setTimeout(function () {

				timeout = null

				func.apply(context, args)

			}, wait)

		}

	}

}

debounce(防抖)

在一定时间内不调用，只调用一次。例如input事件，停止输入500ms之后再执行。

function debounce (fun, delay) {

	let time = null

	return function (...args) {

		let ctx = this

		clearTimeout(time)

		time = setTimeout(function () {

			fun.apply(ctx, args)

			time = null

		}, delay)

	}

}

巴特西

throttle(节流)和debounce(防抖)

throttle(节流)

debounce(防抖)

最新文章

热门文章