Foreword: it is well known that the search function is a high consumption server function, every request is to boost the server, avoid the frequency too fast, resulting in the function decline, the server crash, we need to do some limited solutions. Today our topic is the use of anti – shake

What is anti-shake? If no event is triggered within a fixed time, it will be triggered after the end of the fixed time. If the event is triggered within a fixed time, it will be triggered after the extension of the fixed time

First, the case:

The above is our normal search function, quick click, again and again to request our server interface, no shaking to limit our requests

Second, the demonstration

So what we can see is that after we add the anti-shake, we click multiple times for a given amount of time and instead of multiple requests, we load requests after we don’t click,

Iii. Specific code writing and configuration

1. Find main.js in our vue directory for configuration

Vue.directive('debounce', {
  inserted(el, binding, vnode) {
    let timer = {}
    el.addEventListener('click'.() = > {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() = > {
        binding.value()
      },1000)  // Set the request time to 1s later})}})Copy the code

2. Use of the page

   <div  v-debounce="wkNoOnSearch"Search > </div>// Just use our custom nameCopy the code

Summary: very basic anti – shake timer configuration loading, to optimize our search function