Question

126

How to use debounce on `keyup` with Vue.js

rated 0 times [ 132] [ 6] / answers: 1 / hits: 6942 / 4 Years ago, sat, july 18, 2020, 12:00:00

I am trying to catch the user started typing, and stopped typing using the debounce function. I tried Lodash and Underscore.js.

On my textArea

                               v-on:keyup="handler($event)"

handler: function(e) {

             this.e = e

             if(this.canPublish) {

                 this.setCanNotPublish()

                 this.doStuff()

             }



             var debounceFunction = _.debounce(this.doneTyping(), 5000)

             debounceFunction(e)



         },

I am getting really frustrated about this. In pure JavaScript I made the test work. But with Vue.js where it uses v-on events, data, methods ...etc., I am not able to make it work.

Method doneTyping

doneTyping: function () {

                console.log('done typing....')

            }



}

Method doStuff

doStuff: function () {

             console.log('started typing....')

         }

The intended behaviour is: first the user started typing in the textArea, and it starts the doStuff. And if the user keeps typing in a period shorter than 5 seconds, it will not trigger doStuff again because canPublish is a boolean. Next the user stops typing and then the debounce func is done, and doneTyping fires.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

griffinr

Add To Favorites

Follow

Total Points: 242

Total Questions: 91

Total Answers: 105

Location: Indonesia

Member since Wed, Jul 7, 2021

3 Years ago

griffinr questions

1 How to delete a node in firebase realtime database in javascript

Mon, Oct 19, 20, 00:00, 4 Years ago

1 React - how to append react component to useRef component during useEffect

Thu, Jul 2, 20, 00:00, 4 Years ago

1 Get event target inside a web component

Mon, Sep 16, 19, 00:00, 5 Years ago

1 Best Practice for retrying page.goto, page.waitForNavigation etc. in puppeteer/JavaScript

Thu, Jul 4, 19, 00:00, 5 Years ago

1 Open layers feature hover change style

Wed, Jun 5, 19, 00:00, 5 Years ago

View All

answered 4 Years ago mustafaericho · Accepted Answer

I would do with this two debounced functions, one for started typing which triggers on the leading edge, and one for stopped typing which triggers on the trailing edge.

new Vue({

  el: '#app',

  

  created() {

    this.startedTyping = _.debounce(this.startedTyping, 5000, {

      leading: true,

      trailing: false,

    })

    this.stoppedTyping = _.debounce(this.stoppedTyping, 5000, {

      leading: false,

      trailing: true,

    })

  },

  

  methods: {

    handleKeydown() {

      // This triggers on the leading edge

      this.startedTyping()



      // This triggers on the trailing edge (after 5s)

      this.stoppedTyping()

    },

    

    startedTyping() {

      console.log('started typing')

    },

    

    stoppedTyping() {

      console.log('stopped typing')

    },

  },

})

<script src=https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.19/lodash.min.js></script>



<div id=app>

  <textarea @keydown=handleKeydown></textarea>

</div>

Your code is wrong because you are creating a new debounced function every time the handler is called. You need to have only one debounced function instance that you call each time. It's best to create the debounced function in the created hook.

I often see code like this:

methods: {

  myDebouncedFunc: _.debounce(function () {

    // Do stuff

  }, 1000)

}

This is technically not wrong, but you may not realize that the debounced function will be shared across all instances of that component, which may not be what you want. It's usually best to create the debounced function in the created hook so that each instance of the component gets its own independent debouncing tracking.