debounc throttle by Proxy

app.vue

<template>
  <div id="app">
    <test-component></test-component>
    <test-component></test-component>
  </div>
</template>
import TestComponent from 'test-component'
<script>
export default {
  components: {
    TestComponent
  }
};
</script>

function.js

const createDebounce = function (fn, delay) {
  let runMap = new Map();
  const handler = {
    apply: function (target, context, argumentsList) {
      let timerId = runMap.get(context);
      if (timerId) {
        clearTimeout(timerId);
      }
      timerId = setTimeout(() => {
        target.apply(context, ...argumentsList);
      }, delay);
      runMap.set(context, timerId);
    }
  };
  return new Proxy(fn, handler);
}
const createThrottle = function (fn, delay) {
  let runMap = new Map();
  const handler = {
    apply: function (target, context, argumentsList) {
      if (!runMap.has(context)) {
        runMap.set(context, true);
        setTimeout(() => {
          runMap.delete(context);
        }, delay)
        target.apply(context, ...argumentsList);
      } else {
        console.log('runing, cancel this action!');
      }
    }
  };
  return new Proxy(fn, handler);
}

export {createDebounce, createThrottle};

test-component.vue

<template>
  <div>
    <button @click="click">click</button>
    <button @click="debounceClick">debounceClick</button>
    <button @click="throttleClick">throttleClick</button>
    after time: {{ time }}
  </div>
</template>
<script>
import { createDebounce, createThrottle } from "fn";

export default {
  data() {
    return {
      time: 0,
    };
  },
  methods: {
    click() {
      let delay = Math.random() * 3000;
      setTimeout(() => {
        this.time = delay;
      }, delay);
    },
  },
  created() {
    this.debounceClick = createDebounce(this.click, 300);
    this.throttleClick = createThrottle(this.click, 1000);
  },
};
</script>