以这一行html代码做实验:

<div><input type="text" id="inp"></div>

主要原理: 利用闭包将内部的函数保存到外部, 同时timer也保存了下来, 这样除了第一次, 后续每次触发函数, timer都有值, 就可以判断当前是否有任务正在执行.

防抖

目的: 多次事件触发合并为一次,所以无论调用多少次，都只能执行一次

关键代码： clearTimeout


      function debance(delay) {
          let timer
          return function (value) {
        //        清空了上一次的timer 只能重新计时--所以无论调用多少次，都只能执行一次
        //        一直触发，一直清空，只保留了最后一次
            clearTimeout(timer)
            timer = setTimeout(function () {
              console.log(value)
            }, delay)
          }
     }

    debanceFunc = debance(1000)
    inp.addEventListener('keyup', function (e) {
      debanceFunc(e.target.value)
    })

节流

目的: 执行完之后再清空，然后才开始下一次（执行期间不管又调用多少次，都清空了，重新开始）

关键代码： timer = null

var inp = document.getElementById('inp')

        function throttle(delay) {
            let timer
            return function() {
                // 如果没有任务的话，就执行-有任务的话就不执行
                if (!timer) {
                    timer = setTimeout(function() {
                        // 要执行的任务
                        console.log('1')
                            // 表示该任务结束，可以开始下一个
                        timer = null
                    }, delay)
                }
            }
        }

        inp.addEventListener('keyup', throttle(1000))

防抖与节流

防抖

节流