Recently, most background project management systems have been throttling with local instructions, which is troublesome. A global text box is posted here. The throttling instruction of the method is executed 0.8 seconds after the user enters

---

1、 New debounce JS file, content:

import Vue from ‘vue’

//Custom anti shake

Vue.directive(‘debounce’,{

  inserted: function (el, binding) {

    let timer

    el.addEventListener(‘keyup’, () => {

      if (timer) {

        clearTimeout(timer)

      }

      timer = setTimeout(() => {

        binding.value()

      }, 800)

    })

  }

})

---

2、 Main JS:

import “@/utils/debounce.js”

Yes, that’s it

---

3、 Use in page:

< El input V-model = “XXX. Xxxxx” v-debounce = “own method name” >

---

Post local instructions:

//Throttle command

  directives: {

    debounce: {

      inserted: function (el, binding) {

        let timer

        el.addEventListener(‘keyup’, () => {

          if (timer) {

            clearTimeout(timer)

          }

          timer = setTimeout(() => {

            binding.value()

          }, 500)

        })

      },

    },

  },

Use: < El input; V-model = “XXX. Xxxxx” v-debounce = “own method name” >