美文网首页
节流函数 防抖函数

节流函数 防抖函数

作者: 曼少女 | 来源:发表于2020-08-11 19:09 被阅读0次

    防抖函数(debounce)

    当持续触发事件时,在一定的时间段内没有触发事件,事件才会让函数调用一次,如果一定的你时间内触发事件,就重新开始计算

    实现

    // debounce_.js
    function debounce_ (fn, delay) {
      let timer = null
      return function () {
        if (timer !== null) clearTimeout(timer)
        timer = setTimeout(fu, delay)
      }
    }
    function handleEvent () {
      console.log('我来了')
    }
    window.addEventListener('scroll', debounce_(handleEvent, 1000))
    

    节流函数(throttle)

    当持续触发事件时,在一定时间内触发保证只调用一次处理事件

    function throttle (fn, delay) {
      let prev = Date.now()
      return function () {
        let now = Date.now()
        let seft = this
        let args = arguments
        if (now - prev >= delay) {
          fn.apply(seft, args)
          prev = Date.now()
        }
      }
    }
    function handleEvent () {
      console.log('我来了')
    }
    window.addEventListener('scroll', throttle(handleEvent, 1000))
    

    相关文章

      网友评论

          本文标题:节流函数 防抖函数

          本文链接:https://www.haomeiwen.com/subject/uiiydktx.html