javascript常用函数之防抖和节流

节流(throttle)和防抖(debounce)

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

  function debounce(fn, wait) {
      let timeout = null;
      return function() {
          if (timeout !== null) clearTimeout(timeout)
          timeout = setTimeout(fn ,wait)
      }
  }
  
  function handle() {
      console.log('事件调用成功')
  }
  
  window.addEventListener('scroll', debounce(handle, 1000))
  

• 节流
   持续触发时，保持一定时间段内只调用一次事件处理函数。节流有两种实现方式。
  • 时间戳

    function throttle(fun, delay) {
        let prev = Date.now()
        return function() {
            const now = Date.now()
            if (now - prev >= delay) {
                fun()
                prev = Date.now()
            }
        }
    }
    
    function handle {
        console.log('事件调用成功')
    }
    
    window.addEventListener('scroll', throttle(handle, 1000))
    

  • 定时器

    function throttle(fun, delay) {
        let timeout = null;
        return function() {
            if (!timeout) {
                timeout = setTimeout(() => {
                    fun()
                    timeout = null
                }, delay)
            }
        }
    }
    
    function handle() {
        console.log('事件调用成功')
    }
    
    window.addEventListener('scroll', throttle(handle, 1000))