Javascript 防抖与节流

Javascript 防抖与节流

防抖

防抖的意思是，在连续的操作中无论多长时间，只有某一次的操作后，再指定的时间内没有再操作了，这一次才被判定有效。
具体场景：搜索框输入关键词实时搜索过程中，实时请求服务器匹配搜索结果。如果不进行处理，输入框内容一直变化，导致一直发送请求。如果进行防抖处理，那就是当输入完成后一定时间（例500ms）没有再输入内容，这是再触发请求。

export function debounce(fn, delay = 500) {
	let lastTime;
	return function() {
		if(lastTime) {
			clearTimeout(lastTime)
		}
		const [that, args] = [this, arguments];
		lastTime = setTimeout(() => {
			fn.apply(that, args)
		}, delay);
	}
}

// 在xxx.vue中应用
eventName:debounce(function() {
	// todo
})

节流

节流的意思是在规定的时间内，只触发一次。例如在设定的500ms内，无论点击按钮多少次，只会触发一次请求。
具体场景：抢购时，有无数人快速点击按钮，如果每次点击都发送请求，给服务器造成巨大压力，但是进行节流后，就会减少请求的次数。

export function throttle(fn, delay = 500) {
    let last,timer;
    return function() {
        let that = this;
        let args = arguments;
        let now = new Date();
        if(last && now - last < delay) {
            clearTimeout(timer);
            timer = setTimeout(function() {
                last = now;
                fn.apply(that, args);
            }, delay);
        } else {
            last = now;
            fn.apply(that, args);
        }
    }
}