乐趣区

关于javascript:什么是防抖和节流有什么区别如何实现

什么是防抖和节流?有什么区别?如何实现?

1. 防抖

高频率事件在 n 秒内只触发一次,如果再次被触发,则从新计时

  • 计划

设置定时器,当 n 秒内再次被触发,则革除定时器。

<button id="btn"> 提交 </button>
<script >
document.getElementById('btn').addEventListener('click', submit)
function submit(){console.log('申请数据')
}
</script>

下面是最简略的提交按钮, 当初的需要是点击按钮,申请后盾的数据。
如果依照下面的代码,能够实现,然而如果用户间断点击,就在造成资源节约。这里就用到了防抖。

document.getElementById('btn').addEventListener('click', debounce)
let timer = null
function debounce(){clearTimeout(timer)
    timer = setTimeout(function() {submit()
    }, 1000)
}

function submit(){console.log('申请数据')
}

下面实现了最根本的 需要,当初有点不好,就是咱们定义了一个全局变量。基于尽可能少的定义全局变量,咱们将
变量放入 debounce 函数的外部
能够做以下实现

document.getElementById('btn').addEventListener('click', debounce(submit))

function debounce(fn){
    let timer = null
    return function() {clearTimeout(timer)
       timer = setTimeout(function() {fn()
       }, 1000)
    }
}
function submit(){console.log('申请数据')
}

这里是基于闭包实现的,按钮 element 监听了 click 事件,并执行 debounce 办法,debounce 办法又返回一个新函数
,这里的 timer 就会始终存在,不被销毁,因为函数被内部援用。
所以下次点击的时候 timer 还是存在,咱们点击的时候首先会 clearTimeout,也就是勾销上次的申请。

2. 节流

高频率事件在 n 秒内只触发一次,n 秒内不再触发。

  • 计划

还是基于下面的例子

document.getElementById('btn').addEventListener('click', throttle)

let flag = true
function throttle(){if (!flag) return
    flag = false
    setTimeout(function(){submit()
        flag = true
    },1000)
}
function submit(){console.log('申请数据')
}

下面定义了一个标记 flag 示意以后函数执行状态,如果以及过了 1 秒,申请数据执行后,咱们将 flag 设置成 true,
阐明函数可从新执行,否则就间接返回,不执行 setTimeout,优化一下

document.getElementById('btn').addEventListener('click', throttle(submit))

function throttle(fn){
    let flag = true
    return function() {if (!flag) return
      flag = false
      setTimeout(function(){fn()
          flag = true
      },1000)
    }
}
function submit(){console.log('申请数据')
}
退出移动版