Vue最新防抖方案(必看篇)

时间：2023-02-19 10:53:04|栏目：vue|点击：次

函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。举个栗子，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。

函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。举个栗子，持续触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle函数。

防抖实例：

<script>
const delay = (function () {
 let timer = 0
 return function (callback, ms) {
  clearTimeout(timer)
  timer = setTimeout(callback, ms)
 }
})()
export default {
methods：{
fn() {
   delay(() => {
    //执行部分
   }, 500)
}
}
}
</script>

节流实例：

var throttle = function(func, delay) {      
  var timer = null;      
  return function() {        
    var context = this;        
    var args = arguments;        
    if (!timer) {          
      timer = setTimeout(function() {            
        func.apply(context, args);            
        timer = null;          
      }, delay);        
    }      
  }    
}    
function handle() {      
  console.log(Math.random());    
}    
window.addEventListener('scroll', throttle(handle, 1000));

上一篇：vuex mutations的两种调用方法小结

栏目：vue

下一篇：vue3中element-plus icon图标的正确使用姿势

本文标题：Vue最新防抖方案(必看篇)

本文地址：http://www.codeinn.net/misctech/226031.html

更多vue

vue

Vue最新防抖方案(必看篇)

阅读排行

推荐教程