什么是防抖和节流？

防抖

1.定义：

防抖是指在一定时间内再次触发此事件，会清空上一次的事件重新开始，如果制定时间内没有再次触发事件，那么这个事件才会执行

例如：input输入信息,不可能每次按下都发起一个ajax请求,可以等一段时间内不输入了之后在发起请求

2.代码：

function AntiShake(fn) {
    let timer = null // 创建一个标记用来存放定时器的返回值
    return function() {
        clearTimeout(timer)  // 每当用户输入的时候把前一个 setTimeout 清除掉
        timer = setTimeout(() => { // 创建一个新的 setTimeout
            execute.apply(this, arguments)
        }, 1000)
    }
}

function execute() {
    console.log('防抖')
}

var ipt = document.getElementById('ipt');
ipt.addEventListener('input', AntiShake(execute)); //防抖    

 

节流

1.定义：

节流是指在一定时间内同一事件只能触发一次，只有超过这个时间才会再次触发

例如：验证码60秒内只能获取一次，只有超过60秒才可以再次获取

2.代码：

function throttle(fn) {
    let flag = true; // 通过闭包缓存一个标记
    return function() {
        if(!flag) { // 判断flag是否为true，不为true则return
            return
        } else {
            flag = false //将flag设置为false
            setTimeout(() => { // 将外部传入的函数放在setTimeout中
                fn.apply(this, arguments)
                flag = true // 代码执行完毕将flag改回true
            }, 1000)
        }
    }
}

function execute(e) {
    console.log(e.target.innerWidth, e.target.innerHeight);
}

window.addEventListener('resize', throttle(execute)); // 节流