How to use the debouce anti-shake function in Vue

1. Anti-shake function

Assuming that the interval between two Ajax communications must not be less than 2500 milliseconds, the above code can be rewritten as follows.

$('textarea').on('keydown', debounce(ajaxAction, 2500));

function debounce(fn, delay){
  var timer = null; // declare timer return function() {
    var context = this;
    var args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

In the above code, as long as the user presses the key again within 2500 milliseconds, the previous timer will be canceled and a new timer will be created. This ensures that the interval between callback function calls is at least 2500 milliseconds.

2. Use debouce anti-shake function in Vue

Creates a debounced function that calls func after a delay of wait milliseconds from the last time it was called. The debounced function provides a cancel method to cancel the delayed function call and a flush method to call it immediately. You can provide an options object to determine how to call the func method, options.leading and | or options.trailing to determine how to trigger before and after the delay

(Note: whether to call first and then wait or wait first and then call).

When func is called, it will be passed the arguments that were last provided to the debounced function. Subsequent calls to the debounced function return the result of the last call to func.

Lodash debouce parameters:

• func (Function) : The function to be debounced.
• [wait=0] (number) : The number of milliseconds to delay.
• [options=] (Object) : Options object.
• [options.leading=false] (boolean) : Specifies to be called before the delay starts.
• [options.maxWait] (number) : Set the maximum value that func is allowed to be delayed.
• [options.trailing=true] (boolean) : Specifies to be called after the delay ends.

<template>
<el-input
    v-model="value"
    size="mini"
    placeholder="Please enter.."
    clearable
    @keydown.enter="handleSearch"
  ></el-input>
</template>
<script>
import _ from 'lodash'
export default {
data() {
    return { value: '' }
},
create() {
    this.handleSearch = _.debounce(() => {
      // Get the list this.getList();
    }, 300);
},
beforeDestroy() {
    //Cancel the anti-shake call of this function this.handleSearch.cancel();
},
}
</script>

This is the end of this article on how to use the debouce anti-shake function in Vue. For more information about using the debouce anti-shake function in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!