关于函数节流 时间戳方式与延时器方法的封装的疑问

[在下王高人]

时间戳方式封装,为什么总是会在第一时间打印,而不是在两秒之后执行 代码如下:

  function throttle(fn, wait) {
          let old = 0
          return function () {
            let now = new Date().valueOf()
            if (now - old > wait) {
              fn()
              old = now
            }
          }
        }
        function fn() {
          console.log(input.value)
        }

        input.oninput = throttle(fn, 2000)

延时器方式封装,为什么总是会在最后多打印一次,代码如下:

 const input = document.querySelector("input")

      function throttle(fn, wait) {
        let time
        return function () {
          if (!time) {
            time = setTimeout(function () {
              time = null
              fn()
            }, wait)
          }
        }
      }
      function fn() {
        console.log(input.value)
      }
      input.oninput = throttle(fn, 2000)

这两个地方真的很费解,不知道为什么有这样的效果

[天际的海浪]

你第一个代码用时间戳的作用不是延时执行fn。 只是让两次事件的触发间隔必须2秒以上才能执行fn，2秒内再次触发事件不执行fn而已。 第二个代码没有问题，不会多打印啊。

[河南棒小伙]

首先你的时间戳式封装，很有问题，第一次绑定fn的时候，新的时间戳进去，是一个很大的数，old是0，肯定就执行了，除非手动调用返回的新函数，否则每次使用throttle，都是一样的，所以节流一定要使用setTimeout的。 第二个方式看起来没有什么问题啊，我运行良好。

[在下王高人]

第二个方式换成鼠标移动事件后移除鼠标的话总是会多执行一次的