vue中防抖和节流的多种使用方式——装饰器，指令，通用方法

在Vue中，防抖和节流可以通过多种方式实现，包括装饰器、指令和常规的函数调用。以下是实现防抖和节流的示例代码：

防抖（Debounce）

装饰器

function debounce(delay, callback) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      callback.apply(this, args);
    }, delay);
  };
}
 
// 使用
class MyComponent extends Vue {
  @debounce(500)
  onInputChange(event) {
    console.log(event.target.value);
  }
}

指令

Vue.directive('debounce', {
  bind(el, binding, vnode) {
    let timeoutId;
    el.addEventListener('input', (e) => {
      if (timeoutId) clearTimeout(timeoutId);
      timeoutId = setTimeout(() => {
        binding.value(e);
      }, 500);
    });
  }
});
 
// 使用
new Vue({
  el: '#app',
  methods: {
    handleInput: debounce(500, function(event) {
      console.log(event.target.value);
    })
  }
});

节流（Throttle）

装饰器

function throttle(delay, callback) {
  let lastCall = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastCall < delay) {
      return;
    }
    lastCall = now;
    callback.apply(this, args);
  };
}
 
// 使用
class MyComponent extends Vue {
  @throttle(1000)
  onScroll() {
    console.log(window.scrollY);
  }
}

指令

Vue.directive('throttle', {
  bind(el, binding, vnode) {
    let lastCall = 0;
    el.addEventListener('scroll', () => {
      const now = new Date().getTime();
      if (now - lastCall < 1000) {
        return;
      }
      lastCall = now;
      binding.value();
    });
  }
});
 
// 使用
new Vue({
  el: '#app',
  methods: {
    handleScroll: throttle(1000, function() {
      console.log(window.scrollY);
    })
  }
});

通用方法

function debounce(fn, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}
 
function throttle(fn, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastCall < delay) {
      return;
    }
    lastCall = now;
    fn.apply(this, args);
  };
}
 
// 使用
const myDebouncedFunction = debounce(function() {
  console.log('Debounced!');
}, 1000);
 
const myThrottledFunction = throttle(function() {
  console.log('Throttled!');
}, 2000);
 
// 在事件监听器中使用
window.addEventListener('resize', myT