防抖函数和节流函数

防抖函数

就是指触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。防抖函数分为非立即执行版和立即执行版。

// 防抖函数限制只执行n秒内的最后一次调用
function success (event) {  
	console.log('成功执行')  
}  
// 防抖函数
const debounce = (fn, delay) => {  
	let timer = null    
	return (...args) => {  
		clearTimeout(timer)
		timer = setTimeout(() => {
			fn.apply(this, args)
		}, delay)
	}
}
window.addEventListener('click', debounce(success, 5000)，false)

addEventListener事件监听 ` window.addEventListener('click', debounce(fn, 500), false)

• 事件名
• 指定时间触发时执行的函数
• 可选，布尔值。为true时，事件会在捕获阶段被提前触发。默认为false，在冒泡阶段触发

注意：不能写成debounce(fn(100), 5000)因为fn()相当于执行了这个函数，fn是直接饮用这个函数，如果写成fn()，会报错： Invalid destructuring assignment target

js中的call、apply、bind
都是为了替换函数中的this

// call和apply的区别在于传参，第一个参数都为要替换的对象，call将传参依次加载对象后，apply将传参统一写成数组作为第二个参数，即不传参时，call和apply是一样的
fn.call(obj, 100, 200)
fn.aplly(obj, [100, 200])

bind方法和apply、call稍有不同，bind方法事先把fn的this改变成想要的结果，并准备好相应的参数。即bind会生成新的函数，需要时调用，apply、call是马上会执行。
const tempFn = fn.bind(obj, 1, 2)

节流函数

就是指连续触发事件但是在 n 秒中只执行一次函数。 节流会稀释函数的执行频率。

function fun(event) {
	console.log('节流函数')
}
let flag = false
function to(fn, delay) {
    if (flag) return
    return (...args) => {
    	flag = true
    	setTimeout(() => {
        	fn.apply(this, args)
        	flag = false
        }, delay)
    }
}
window.addEventListener('click', to(fun, 500), false)