JS防抖节流函数

防抖函数

事件触发后延迟执行,输入期间不执行触发操作,无操作及延迟时间过后触发,一般适用于频繁触发的操作,原理是用setTimeout函数达到延迟效果,连续操作时使用clearTimeout函数不断清除定时器,重置延迟时间,阻止连续触发。

   let inp = document.getElementById("inp")
        var timeout;
        inp.oninput = function () {
            clearTimeout(timeout)
             timeout = setTimeout(() => {
                console.log(this.value)
        },1000)
   }

拿input输入框举例，每次输入值不会立打印输出，停止输入1秒后打印输出结果。

节流函数

顾名思义节流，就是节制的意思，能省就省。写法与防抖函数类似，都是使用定时器，不过它们还是有差别的。防抖函数是连续输入值触发清除定时器来阻止，文本框一直输入值，是不会触发的，只有停止输入后1秒才会触发。而节流函数是规定一段时间内无法触发，时间过了才触发，即使不断输入值，但只要1秒钟过了，也会触发。

  let inp = document.getElementById("inp")
  var timeout
        let flag = true
        inp.oninput = function () {
            if (!flag) {
                return
            }
            flag = false
            timeout = setTimeout(() => {
                console.log(123)
                flag = true
            }, 1000)
        }