防抖函数

当持续触发事件 一定时间内没有在触发事件 时间处理函数才会执行一次;如果设定的时间到来之前 有一次触发了事件 就重新开始延时。

// 利用闭包
function  deounce(fun,delay){
    let timer
    return function(args){
        clearInterval(timer)
        timer = setTimeout(function(){
            fun(args)
        },delay)
    }
}
function inputFun(value){
    console.log(`你输出的结果是${value}`)
}
const input = document.getElementById("input")
const debounceInput = deounce(inputFun,1000)
input.addEventListener('keyup',function(e){
    debounceInput(e.target.value)
})

应用场景

输入搜索： 输入结束后n秒才进行搜索请求，n秒内有输入的内容,就重新计时。

节流函数

当持续触发事件的时候 保证一段时间内 只调用一次时间处理函数

function throttle(func,wait){
    let timerOut
    return functiuon(){
        if(!timerOut){
            timerOut = setTimeout(function(){
                timerOut = null
                func()
            },wait)
        }
    }
}
function  handle(){
      console.log(math.random())
}
document.getElementById("button").onclick = throttle(handle,2000)

经典案例

鼠标不断点击触发,规定在n秒内多次点击只有一次生效.