防抖和节流的实现

什么是防抖: 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

举例: 点击提交表单后，用户在结果还没出来的时候重复触发。

应用场景:

• 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求
• 搜索框搜索输入。只需用户最后一次输入完，再发送请求

实现方法就是设置一个计时器, 当用户反复进来就是清除前面的计时器, 再重新设置一遍

// 防抖  传入一个函数防抖的时间
function debounce(fn, delay) {
    let time = null
    return () => {
        clearTimeout(time)
        time = setTimeout(() => {
            fn.call(this.arguments)
        }, delay);
    }
}

// 绑定一个按钮添加事件
const but = document.querySelector('.button')
// 当按钮点击就触发这个函数, 如果连续点击每次时间间隔不超过200毫秒就不会触发这个函数, 只会在最后一次触发
but.addEventListener('click', debounce(debounceEvent, 200))

• call () 方法调用一个函数, 其具有一个指定的 this 值和分别地提供的参数 (参数的列表)。
  注意：该方法的作用和 apply () 方法类似，只有一个区别，就是 call () 方法接受的是若干个参数的列表，而 apply () 方法接受的是一个包含多个参数的数组。

什么是节流: 指定时间间隔内只会执行一次任务。

举例: 如果不想每次洗手因为水龙头的水流的太多导致浪费水, 我们就可以把阀门开小点

应用场景:

• 谷歌搜索框，搜索联想功能
• 高频点击提交，表单重复提交

如何实现: 设置一个阀门, 每次阀门打开时就在规定的时间内处理完事件就关闭阀门, 再次进入又需要重新打开阀门

// 节流 传递一个函数和节流的时间
function throttle(fn, delay) {
    let time = true
    return () => {
        if (!time) {
            return
        }
        time = false
        setTimeout(() => {
            time = true
            fn.apply(this, arguments)
        }, delay);
    }
}