夜猫子的知识栈 夜猫子的知识栈
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《Web Api》
    • 《ES6教程》
    • 《Vue》
    • 《React》
    • 《TypeScript》
    • 《Git》
    • 《Uniapp》
    • 小程序笔记
    • 《Electron》
    • JS设计模式总结
  • 《前端架构》

    • 《微前端》
    • 《权限控制》
    • monorepo
  • 全栈项目

    • 任务管理日历
    • 无代码平台
    • 图书管理系统
  • HTML
  • CSS
  • Nodejs
  • Midway
  • Nest
  • MySql
  • 其他
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • Ajax
  • Vite
  • Vitest
  • Nuxt
  • UI库文章
  • Docker
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

夜猫子

前端练习生
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《Web Api》
    • 《ES6教程》
    • 《Vue》
    • 《React》
    • 《TypeScript》
    • 《Git》
    • 《Uniapp》
    • 小程序笔记
    • 《Electron》
    • JS设计模式总结
  • 《前端架构》

    • 《微前端》
    • 《权限控制》
    • monorepo
  • 全栈项目

    • 任务管理日历
    • 无代码平台
    • 图书管理系统
  • HTML
  • CSS
  • Nodejs
  • Midway
  • Nest
  • MySql
  • 其他
  • 技术文档
  • GitHub技巧
  • 博客搭建
  • Ajax
  • Vite
  • Vitest
  • Nuxt
  • UI库文章
  • Docker
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 基础

  • 响应式

  • 组件

  • 过渡&动画

  • 可复用性

  • 工具

  • 规模化

  • 路由(核心)

  • 组合式

  • Vuex

  • Pinia

  • 其他

    • 手动渲染虚拟dom
    • 全局事件总线($bus)
    • 全局方法和属性 createAPP
    • Vue3-TS 中使用 Express
    • watch监听Props属性值失败原因
    • main.js推荐配置
    • 脚手架前期基础配置
    • 跨域之config.js配置
    • Vue中的防抖函数封装和使用
      • vue的数据更新
      • 操作本地缓存
      • api使用流程
      • ajax封装及api的获取和配置
      • vue解析n字符
      • TS获取ref绑定元素
      • 解决vue3中Props无法引入外部类型
      • vue2升vue3注意事项
    • Vue3 源码学习记录

    • 《Vue》笔记
    • 其他
    夜猫子
    2020-02-04
    目录

    Vue中的防抖函数封装和使用

    # Vue 中的防抖函数封装和使用

    如搜索框中,每改变一个数值就请求一次搜索接口,当快速的改变数值时并不需要多次请求接口,这就需要一个防抖函数:

    // 防抖函数
    /**
     * @param {Function} fun
     * @param {number} wait
     */
    export function debounce(fun, wait) {
      let timer, _this;
      return function () {
        _this = this;
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          fun.call(_this, ...arguments);
        }, wait);
      };
    }
    
    // 节流函数
    /**
     * @param {Function} func
     * @param {number} wait
     * @param {boolean} immediate
     * @return {*}
     */
    export function throttle(func, wait, immediate) {
      let timeout, args, context, timestamp, result;
    
      const later = function () {
        // 据上一次触发时间间隔
        const last = +new Date() - timestamp;
    
        // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
        if (last < wait && last > 0) {
          timeout = setTimeout(later, wait - last);
        } else {
          timeout = null;
          // 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
          if (!immediate) {
            result = func.call(context, args);
            if (!timeout) context = args = null;
          }
        }
      };
    
      return function (...args) {
        context = this;
        timestamp = +new Date();
        const callNow = immediate && !timeout;
        // 如果延时不存在,重新设定延时
        if (!timeout) timeout = setTimeout(later, wait);
        if (callNow) {
          result = func.apply(context, args);
          context = args = null;
        }
        return result;
      };
    }
    
    //使用:
    import { debounce } from "@/common/js/util";
    
    const submitForm = debounce(() => {
      getFileUrl().then(() => {
        feedback(Object.assign({}, formData)).then(() => {
          ifSubmitback.value = true;
        });
      });
    }, 500);
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69

    # 相关文章

    防抖与节流函数 (opens new window)

    编辑 (opens new window)
    #Vue
    上次更新: 2024/6/18 18:14:00
    跨域之config.js配置
    vue的数据更新

    ← 跨域之config.js配置 vue的数据更新→

    最近更新
    01
    IoC 解决了什么痛点问题?
    03-10
    02
    如何调试 Nest 项目
    03-10
    03
    Provider注入对象
    03-10
    更多文章>
    Copyright © 2019-2025 Study | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式