Comparison of performance of vue watch monitor trigger optimization search box anti-shake throttling

summary

• "Methods to implement the anti-shake function of search box"
• "Differences between anti-shake and throttling in search box and application scenarios"
• "How to optimize the performance of search boxes: Comparison of anti-shake and throttling"
• "Principles and implementation methods of search box anti-shake technology"
• "Tips to improve the response speed of search boxes: Applications of anti-shake and throttling"

Example

<template>
  <div>
    <el-input v-model="search" />  
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      search: '',
      timer:null
    }
  },
  watch: {
    search: {
      handler (newVal, oldVal) {
        if () {
          clearTimeout()
        }
         = setTimeout(() => {
          ();
        }, 1000)
      },
      deep: true
    }
  },
  methods: {
    getGoods(){
      ('Request once')
    }
  }
}
</script>

Expand knowledge points

What is anti-shake

Anti-shake, that is, the same event is triggered in a large number of times, and the function will only be executed once. The implementation principle is to set a timer, which is agreed to trigger event processing after xx milliseconds. Each trigger event will be reset until there is no second operation within xx milliseconds. Anti-shake is often used for monitoring event processing of search boxes/scroll bars. If anti-shake is not done, every time a word/scroll screen is entered, event processing will be triggered, causing waste of performance.

What is intercepting

Anti-shake is delayed execution, while throttling is interval execution. Function throttling means that it is executed every once in a while. The implementation principle is to set a timer, which is to agree to execute events after xx milliseconds. If the time comes, then execute the function and reset the timer. The difference between anti-shake is that every time the anti-shake is triggered, the timer is reset, and the throttling is cleared after the timer reaches the time.

The above is a detailed comparison of the performance of the vue watch monitor trigger optimization search box. For more information about vue watch monitor triggering anti-shake, please pay attention to my other related articles!