【前端面试】防抖和节流

防抖

含义：规定时间内发生抖动时不执行后续操作。

const button = document.querySelector('.input');

function payMoney() {
    console.log('已剁');
    console.log('this ==> ', this);
}

function debounce(func, delay) {
    let timer;
    return function () {
        let context = this; // 解决防抖this指向
        let args = arguments; // 解决传参问题
        clearTimeout(timer);
        timer = setTimeout(() => {
            // func.call(context);
            func.apply(context, args);
        }, delay);
    };
}

button.addEventListener('click', debounce(payMoney, 1000));
// button.addEventListener('click', payMoney);

节流

含义：规定时间间隔内后续动作只会执行一次。

function coloring() {
	let r = Math.floor(Math.random() * 255);
	let g = Math.floor(Math.random() * 255);
	let b = Math.floor(Math.random() * 255);
	document.body.style.background = `rgb(${r},${g},${b})`;
}

function throttle(func, delay) {
	let timer;
	return function () {
		let context = this;
		let args = arguments;
		if (timer) {
			return;
		}
		timer = setTimeout(() => {
			func.apply(context, args);
			timer = null;
		}, delay);
	};
}

window.addEventListener('resize', throttle(coloring, 2000));