JavaScript中函数的防抖和节流

函数防抖：一个函数频繁触发，在规定时间内，只让最后一次函数执行有效（有延迟）

PS：实际使用中还是需要注意this指向

1、非立即执行版（例如点击之后不会立马执行，第一次执行会在delay秒后执行）

function debounce(fn,delay){
	let timer=null;
	return function(...args){
		clearTimeout(timer)
		timer=setTimeout(fn.bind(this,...args),delay) // 定时器回调函数this指向外部this
	}
}

2、立即执行版（例如点击会立马执行，下一次就会在delay秒后执行）

// 立即执行版
function debonce(fn, delay) {
    let timer = null;
    return function (...args) {
   	 	if (timer) clearTimeout(timer)
    	let flag = !timer;
    	timer = setTimeout(() => {
        	 timer = null;
   		}, delay);
    	if (flag) fn.call(this, ...args)
    }
}

For example

let handleClick = debonce(function () {
       console.log('1', this);
    }, 1000)
document.addEventListener('click', handleClick)

函数节流：一个函数频繁触发，在规定时间内，只让第一次函数执行有效

function throttle(fn,delay){
	let start=0;
	return (...args)=>{
		let now=new Date();
		if(now-start>=delay){
			fn.call(this,...args);
			start=now;
		}
	}
}

我在vue项目中对按钮使用过函数防抖，this指向让人头疼，大家在项目中使用的时候多调试一下。