作者:yanyige | 发布时间:2017-04-16 14:55

小西天。 北京

函数节流和防抖是一个老生常谈的问题，面试官会经常问到~

这里动手记录一下。

为什么要函数防抖呢？

初学者会经常发现，自己写的js函数跑起来的页面，CPU占用十分严重。这是为什么呢？ 很可能是他在resize或者mousemove等方法上绑定了一些事件。这些事件会不停的触发回调函数，导致页面卡顿。那么我们要如何解决这个问题呢？ 这里就可以用到函数去抖或者函数节流等方法。

直接上代码（debounce）：

function debounce(fn, delay) {
	let timer = null;

	return function() {
		let context = this;
		let args = arguments;

		setTimeout(function() {
			fn.apply(context, args);
		}, delay);
	}
}

let printData = debounce(function(text) {
	console.log(text);
}, 500);

var input = document.getElementById('test');
input.addEventListener('keyup', function(event) {
	printData(this.value);
})

就是让一个函数无法在很短的时间间隔内连续调用，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用

function throttle(fn, delay, mustDelay) {
	let timer = null;
    let t_star;
    
    return function() {
        let context = this;
		let args = arguments;
		let t_cur = new Date();
		clearTimeout(timer);
		
		if(!t_star) {
		    t_star = t_cur;
		}
		if(t_cur - t_star > mustDelay) {
		    fn.apply(context, args);
		    t_star = t_cur
		} else {
		    timer = setTimeout(function() {
		        fn.apply(context, args);
		    }, delay);
		}
    }
}

let printData = throttle(function(text) {
	console.log(text);
}, 500);

var input = document.getElementById('test');
input.addEventListener('keyup', function(event) {
	printData(this.value);
})

间隔一定时间执行回调，来控制函数执行调用的频率，减少一些过快的调用来节流。