Shulou(Shulou.com)06/02 Report--

Editor to share with you how to use the debouce anti-shake function in Vue. I hope you will get something after reading this article. Let's discuss it together.

1. Anti-shake function

Assuming that the interval between two Ajax communications should 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; / / declaration 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 hits the key again within 2500 milliseconds, the last timer will be canceled and a new timer will be created. This ensures an interval of at least 2500 milliseconds between callback functions.

Using debouce anti-shake function in 2.Vue

Create a debounced (anti-jitter) function that calls the func method after a delay of milliseconds after the last call to wait. The debounced (anti-jitter) function provides a function call to cancel the delay by the cancel method and an immediate call to the flush method. You can provide an options (option) object to decide how to call the func method, and options.leading and | or options.trailing to decide how to trigger before and after delay

(note: whether to call first and then wait or wait before calling).

The last parameter supplied to the debounced (anti-jitter) function is passed in when func is called. The debounced (anti-jitter) function returned by subsequent calls is the result of the last func call.

Lodash debouce parameters:

Func (Function): a function to prevent jitter.

[wait=0] (number): the number of milliseconds to delay.

[options=] (Object): option object.

[options.leading=false] (boolean): specifies that it is called before the delay starts.

[options.maxWait] (number): sets the maximum allowed delay for func.

[options.trailing=true] (boolean): specifies that it is called after the delay ends.

Import _ from 'lodash'export default {data () {return {value:''}}, create () {this.handleSearch = _ .debounce (() = > {/ / get list this.getList ();}, 300);}, beforeDestroy () {/ / cancel the function's anti-jitter call this.handleSearch.cancel () },} after reading this article, I believe you have a certain understanding of "how to use debouce anti-shake function in Vue". If you want to know more about it, welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.