防抖和节流 — 性能优化

节流: 在规定时间内只能执行一次
防抖: 如果在规定时间内会重新计算时间来执行函数，换句话说，在规定时间外执行才会执行，在规定时间内执行函数那么永远不会执行

节流
var flag = true
function fun() {
    if (flag) {
        setTimeout(() => {
            console.log('执行')
            flag = true
        }, 2000)
    }
    flag = false
}
fun()

当flag是true时才会执行setTimeout，如果在两秒内执行fun函数，由于设置了flag为false，setTimeout不会执行，当回调执行完毕，把flag设为true 此时就能再次调用setTimeout

防抖
var timer
function fun() {
    clearTimeout(timer)
    timer = setTimeout(() => {
        console.log('执行')
    }, 2000)
}
fun()

在setTimeout前加上clearTimeout去清除定时器，所以在两秒内执行fun函数的话，就会执行clearTimeout，导致setTimeout不会执行。跟节流不同的是，执行多次fun函数，每次小于2秒的话，节流每2秒会执行一次，而防抖只会在最后一次执行