How to analyze the <input> field?

Question

I would like to analyze the contents of the field <input>when there is no user activity.

I will take a simple example below (counting the number of characters), but the actual analysis if it is very expensive, so I would like to do it in batches when there is some inactivity of the user, and not to do this with each change the associated variable.

The code for simple analysis can be

var app = new Vue({
  el: '#root',
  data: {
    message: ''
  },
  computed: {
    // a computed getter
    len: function() {
      // `this` points to the vm instance
      return this.message.length
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script>
<div id="root">
  <input v-model="message">Length: <span>{{len}}</span>
</div>

Run code

My problem is what is function()called on every change message. Is there a built-in request throttling mechanism or a typical approach to such a problem in JS?

Answer 1

, . :

,

:

var app = new Vue({
  el: '#root',
  data: {
    message: '',
    messageLength:  0
  },
  methods: {
    len: _.debounce(
      function() {
        this.messageLength = this.message.length
      }, 
      300 // time
    )
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script>
<script src="https://unpkg.com/underscore@1.8.3"></script> <!-- undescore import -->
<div id="root">
  <input v-model="message" v-on:keyup="len">Length: <span>{{ messageLength }}</span>
</div>

: https://vuejs.org/v2/guide/computed.html#Watchers

p.s. computed vue : https://forum-archive.vuejs.org/topic/118/throttle-computed-properties/3

p.p.s debounce throttle.