函数的防抖和节流

函数的防抖

防抖：设置延时器，短时间高频率触发只有最后一次触发成功。
代码如下：

//html代码
   <button id="btn">btn</button>
//js代码
    var btn = document.getElementById('btn')
    var timer = null
    btn.onclick = function () {
        clearTimeout(timer)
        // console.log('点击')
        timer = setTimeout(function () {
            console.log('点击')
        }, 1000)
    }

函数的节流

节流：设置状态锁，短时间高频率触发只有第一次触发成功。
代码如下：

//html代码
  <button id="btn">btn</button> 
//js代码
   var btn = document.getElementById('btn')
   var key = false
   btn.onclick = function () {
        if (!key) {
            console.log('请求')
            key = true
            setTimeout(function () {
                key = false
            }, 1000)
        }
    }