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);
  };
};
相关推荐
Bellafu6662 小时前
selenium 常用xpath写法
前端·selenium·测试工具
blackorbird4 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者5 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强5 小时前
Chrome和IE获取本机ip地址
前端
天***88965 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*5 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v6 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls6 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友6 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵6 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构