vue 防抖与节流用法

一、html

javascript 复制代码
<template>
    <button @click="getData">获取数据</button>
</template>

二、JS

javascript 复制代码
import { throttle } from "@/utils/common";
export default {
    methods:{
        getData: throttle(async function(params){
            console.log("获取接口数据",this,parmas)
        })
    }
}

三、公共方法 common.js

javascript 复制代码
// 节流
export const throttle = function (cb, delay) {
  let timer = null;
  return function (...arg) {
    if (timer) return;
    cb.call(this, arg[0]);
    timer = setTimeout(() => {
      timer = null;
    }, delay);
  };
};
javascript 复制代码
// 防抖
export const debounce = function (cb, delay) {
  let timer = null;
  return function (...arg) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      cb.call(this, arg[0]);
    }, delay);
  };
};
相关推荐
Jerry36 分钟前
使用 Material 3 在 Compose 中设置主题
前端
耶啵奶膘42 分钟前
uni-app头像叠加显示
开发语言·javascript·uni-app
chéng ௹43 分钟前
uniapp 封装uni.showToast提示
前端·javascript·uni-app
生擒小朵拉1 小时前
STM32添加库函数
java·javascript·stm32
tuokuac1 小时前
nginx配置前端请求转发到指定的后端ip
前端·tcp/ip·nginx
程序员爱钓鱼1 小时前
Go语言实战案例-开发一个Markdown转HTML工具
前端·后端·go
万少2 小时前
鸿蒙创新赛 HarmonyOS 6.0.0(20) 关键特性汇总
前端
还有多远.2 小时前
jsBridge接入流程
前端·javascript·vue.js·react.js
蝶恋舞者2 小时前
web 网页数据传输处理过程
前端
非凡ghost2 小时前
FxSound:提升音频体验,让音乐更动听
前端·学习·音视频·生活·软件需求