How to use anti-shake and throttling to prevent repeated clicks in vue
Vue how to use anti-shake and throttling to prevent repeated clicks, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.
/ * Anti-shake function (only perform the last click)
* @ param fn
* @ param delay * @ returns {Function} * @ constructor * / export const Debounce = (fn, t) = > {let delay = t | 500; let timer; console.log (fn) console.log (typeof fn) return function () {let args = arguments; if (timer) {clearTimeout (timer);} timer = setTimeout (() = > {timer = null) Fn.apply (this, args);}, delay);}}; / * function throttling * @ param fn * @ param interval * @ returns {Function} * @ constructor * / export const Throttle = (fn, t) = > {let last; let timer; let interval = t | 500; return function () {let args = arguments; let now = + new Date () If (last & & now-last
< interval) { clearTimeout(timer); timer = setTimeout(() =>{last = now; fn.apply (this, args);}, interval);} else {last = now; fn.apply (this, args);}
Usage:
Methods: {getAliyunData:Throttle (function () {...}, 1000),}
Case 2:
Anti-shaking and throttling are common ways to optimize performance in the development process.
How to use it in vue:
1. Add function anti-shake and throttling methods to public methods (such as public.js)
/ / Anti-shake export function _ debounce (fn, delay) {var delay = delay | | 200; var timer; return function () {var th = this; var args = arguments; if (timer) {clearTimeout (timer);} timer = setTimeout (function () {timer = null; fn.apply (th, args);}, delay) };} / / Throttle export function _ throttle (fn, interval) {var last; var timer; var interval = interval | | 200; return function () {var th = this; var args = arguments; var now = + new Date (); if (last & & now-last < interval) {clearTimeout (timer) Timer = setTimeout (function () {last = now; fn.apply (th, args);}, interval);} else {last = now; fn.apply (th, args);}
2. in the component references that need to be used
Import {_ debounce} from "@ / utils/public"
3. Use in methods
Methods: {/ / change the number of fields changefield: _ debounce (function (_ type, index, item) {/ / do something...})} is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.
