No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to debounce a function in a watched property?

    Help
    2
    3
    157
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • W
      wpq last edited by

      I have a function that sends data (noteContent) to an API. noteContent is changed in a <textarea> and I would like to send it to the API not more often than every 3 seconds.

      I tried the following code, but saveNote() is not called at all:

      <script>
      
      import {debounce} from 'quasar'
      
      export default {
        name: 'MainLayout',
        data() {
          return {
      (...)
            noteContent: '',
            noteFilename: '',
      (...)
        },
        methods: {
      (...)
          saveNote() {
            fetch(`http://localhost:6543/write/${this.noteFilename}`, {
              method: 'POST',
              body: this.noteContent
            })
          }
        },
        watch: {
          noteContent: function () {
            debounce(this.saveNote, 3000)
          }
        }
      (...)
      }
      </script>
      
      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by s.molinari

        Try it like this:

        <script>
        
        import {debounce} from 'quasar'
        
        export default {
          name: 'MainLayout',
          data() {
            return {
        (...)
              noteContent: '',
              noteFilename: '',
        (...)
          },
          methods: {
        (...)
            saveNote() {
              fetch(`http://localhost:6543/write/${this.noteFilename}`, {
                method: 'POST',
                body: this.noteContent
              })
            }
          },
          watch: {
            noteContent: function () {
               this.debounceNoteContent()
            }
          },
          created () {
            this.debounceNoteContent = debounce(this.saveNote, 3000)
          }
        (...)
        }
        </script>
        

        Scott

        1 Reply Last reply Reply Quote 0
        • W
          wpq last edited by

          Coming back to confirm that it works great this way. Thanks!

          1 Reply Last reply Reply Quote 0
          • First post
            Last post