vue中的防抖节流

<template>
  <div class="hello">
    <input type="text" v-model="value">
    <div v-for="i in 1000" :key="i">1</div>
  </div>
</template>

  

export default {
  data() {
    return {
      timer: null,
      time: true,
      value: ''
    };
  },
  watch: {
    value(n) {
      this.debouse(() => {
        console.log(n)
      }, 500)
    }
  },
  mounted() {
    window.onscroll = () => {
      this.jieliu(this.fn, 500);
    };
  },
  methods: {
    fn() {
      console.log(1);
    },
    debouse(fn, delay) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        fn();
      }, delay);
    },
    jieliu(fn, delay) {
      if (!this.time) {
        return;
      }
      this.time = false;
      setTimeout(() => {
        fn();
        this.time = true;
      }, delay);
    },
  },
};
</script>

  

posted @ 2021-09-13 14:46  玉子tamako  阅读(41)  评论(0)    收藏  举报