实现一个函数防抖和节流

概念

函数防抖是停止某个行为一段时间后执行，场景是input输入，联想查询等
函数节流是一段时间内只执行一次，场景是滚动，弹出toast提示等

函数防抖

// delay时间之后再执行
function debounce(fn, delay) {
    var timeout = null
    return function() {
        timeout && clearTimeout(timeout)
        timeout = setTimeout(fn, delay)
    }
}

// delay之前先执行，先设置flag为true, 第一次执行时符合要求立即执行，并设置flag为false,
// delay时间内触发的话，判断flag为false,执行else语句，若之前已有timeout，则重新设定，直到
function debounce2(fn, delay) {
    var timeout = null
    var flag = true
    return function() {
        if (flag) {
            fn.apply(this, arguments)
            flag = false
        } else {
            timeout && clearTimeout(timeout)
            timeout = setTimeout(() => {
                fn.apply(this, arguments)
                flag = true
            }, delay)
        }
    }
}

函数节流，两种实现方式

// delay时间之后再执行
function throttle(fn, delay) {
    var timeout = null
    return function() {
        if (!timeout) {
            timeout = setTimeout(() => {
                fn.apply(this, arguments)
                timeout = null
            }, delay)
        }
    }
}

// delay之前先执行一次，开始时prev是0，事件触发后条件立即成立并执行，之后设置prev为当前事件
// 在delay时间内的事件会被忽略，直到两次间隔大于等于delay则执行
function throttle2(fn, delay) {
    var prev = 0
    // var prev = Date.now() //delay 后执行
    return function() {
        var now = Date.now()
        if (now - prev >= delay) {
            fn.apply(this, arguments)
            prev = Date.now()
        }
    }
}