Elegant throttling / de buffeting decorator under LAYA

There are a lot of articles about decorators , I won't describe it in detail here . Decorators can only decorate classes and class attributes .

1. install tslib

tslib Is a runtime library , It includes all TypeScript Auxiliary function .
The library needs to be tsconfig Open in –importHelpers Logo use .

Under project directory : npm i tslib

2. To configure tsconfig

"compilerOptions": {
    
    "module": "commonjs",
    "target": "es6",
    "noEmitHelpers": true,
    "sourceMap": true,
    "importHelpers": true,
    "experimentalDecorators": true,
    "baseUrl": ".", // It's necessary , otherwise paths Configuration will not take effect  
    "paths": {
    
      "tslib": [
        "tslib/tslib.d.ts"
      ]
    }
  }

3. Examples of decorators

When decorating class attributes , You need to use three parameters in the decorator function ：target、name、descriptor, They represent the target classes that need to be modified 、 Target properties 、 Descriptor of the target attribute .

When writing decorators, be sure to make it clear this Several rules pointing to ：

1. When a function uses new Operator , Inside the function this Points to the newly created object .
2. When using call or apply When you call a function ,this Yes call or apply The first parameter specified . If the first parameter is null Or when it is not an object ,this Point to global object .
3. When a function is called as an attribute in an object , Inside a function this Points to the corresponding object .
4. Finally, the default rule , Default this Point to global object , In the browser Window. But in strict mode it is for undefined Of .

/** *  Function throttling decorator  * @param wait:  Save time  */
export function throttle(wait: number) {
    
    let previous = 0;
    return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
    
        const oldValue = descriptor.value
        descriptor.value = function (...args) {
    
            const now = Date.now();
            if (now - previous > wait) {
    
                oldValue.apply(this, args)
                previous = now;
            }
        };
        return descriptor
    }
}

/** *  Function to dither decorator ( Executive now ) * @param wait:  Shake the time  */
 export function debounce(wait: number) {
    
    let timeout;
    return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
    
        const oldValue = descriptor.value
        descriptor.value = function (...args) {
    
            if (timeout) clearTimeout(timeout);
            let callNow = !timeout;
            timeout = setTimeout(() => {
    
                timeout = null;
            }, wait)
            if (callNow) oldValue.apply(this, args)
        };
        return descriptor
    }
}

4. Usage method

Elegant use of restrictors

@throttle(500) function : After the function is triggered, the limit 500ms Can be triggered again . Application scenarios : Callbacks that can usually be used to limit too fast clicks .

@debounce(500) function : After the function is triggered, the limit 500ms It can only be triggered again if it has not been called in ( Executive now ). Application scenarios : It can usually be used to limit mousemove event , Input events, etc. in the input box . They trigger very frequently , At this time, the function does not need to be executed all the time . Function anti shake is to let events trigger n Only once per second , If it is triggered continuously, the time will be recalculated .

    @throttle(500)
    private onTimeBtn() {
    
        DialogView.show({
    content: i18n(" Are you sure to refresh the current store ?"),
            okFunc: Laya.Handler.create(this, () => {
    
                this.refreshShop();
            })
        })
    }