首页 > 其他分享 >VUE 防抖简单实现

VUE 防抖简单实现

时间:2023-01-09 22:15:39浏览次数:42  
标签:防抖 VUE Invoke res timer Promise 简单 Debounce

防抖代码实现:

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>>
     // ... 需要执行的代码
  })

 

标签:防抖,VUE,Invoke,res,timer,Promise,简单,Debounce
From: https://www.cnblogs.com/moonwebmast/p/17038653.html

相关文章

  • 数据代理_3Vue中的数据代理
    数据代理_3Vue中的数据代理<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Vue中的数据代理</title><scriptsrc="../js/vue.js">......
  • Vue——computed计算属性 例子
    <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metahttp-equiv="X-UA-Compatible"content="IE=edge">  <metaname="viewport"......
  • Vue——watch侦听属性 例子
    <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metahttp-equiv="X-UA-Compatible"content="IE=edge">  <metaname="viewport"......
  • Vue判断数组元素是否为undefined
    问题:现在有这样一个数组,没有第一个元素,如何判断该位置为空控制台输出为undefinde首先尝试array[0]===undefined,可以需要修改为array[0]==="undefinde"这样不行......
  • leetcode简单:[1, 9, 13, 14, 20, 21, 26, 27, 35, 58]
    目录1.两数之和9.回文数13.罗马数字转整数14.最长公共前缀20.有效的括号21.合并两个有序链表26.删除有序数组中的重复项27.移除元素35.搜索插入位置58.最后一个......
  • leetcode简单:[66, 67, 70, 83, 121, 141, 160, 169, ,206, 338]
    目录66.加一67.二进制求和70.爬楼梯83.删除排序链表中的重复元素121.买卖股票的最佳时机141.环形链表160.相交链表169.多数元素206.反转链表338.比特位计数66.......
  • HIVE简单操作命令
    beelinebeeline>!connectjdbc:hive2://192.168.2.2:10000hdfs回车回车直接用默认表,不需要配置权限createtablest(idint,namestring)rowformatdelimitedfieldster......
  • Redis 数据结构-简单动态字符串
    Redis数据结构-简单动态字符串 无边落木萧萧下,不尽长江滚滚来。 1、简介Redis之所以快主要得益于它的数据结构、操作内存数据库、单线程和多路I/O......
  • 硬盘检测工具 Victoria 简单使用教程
    一、注意事项1.下载完成后不要在压缩包内运行软件直接使用,先解压;2.如果软件无法正常打开,请右键使用管理员模式运行。3.为确保检测结果准确(避免卡深灰块),运行Victo......
  • avue的一些踩坑记录
    avue可以说前端开发的一大利器了。给大家封装了一些非常易用的组件,尤其对于crud以及表单的操作。但是封装易用的同时,也会导致一些api不能方便的调用,尤其是多组件嵌套交互......