VUE + TypeScript 防抖简单实现

防抖代码实现:

export class Debounce {

    static current:Debounce = new Debounce();

    static async Invoke<T>(func: () => Promise<T>, timeout: number = 300): Promise<T>{

        return this.current.Invoke(func,timeout);
    }

    private timer: any = null;

    public async Invoke<T>(func: () => Promise<T>, timeout: number = 300): Promise<T> {

        if (this.timer != null) {
            clearTimeout(this.timer);
            this.timer = null;
        }

        return new Promise<any>((resolve, reject) => {
            this.timer = setTimeout(() => {
                func().then(res => {
                    resolve(res);
                }).catch(e => {
                    reject(e);
                })
            }, timeout);
        });
    }

}

调用DEMO

Debounce.Invoke((): Promise<HttpResponse<any>> => {
    // 发送防抖请求
    // service.SearchTag 返回 类型:Promise<HttpResponse<any>>
    return service.SearchTag(key);
  }, 300).then(res => {
     // 300ms 内只执行一次
     //res 类型:Promise<HttpResponse<any>>
     // ... 需要执行的代码
  })

 

posted @ 2023-01-09 21:58  moonwebmast  阅读(183)  评论(0编辑  收藏  举报