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);
  };
};
相关推荐
xiaoyan201516 分钟前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin34 分钟前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦1 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆1 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆2 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding2 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
江城开朗的豌豆2 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js
angen20182 小时前
Ruby如何采集直播数据源地址
前端·chrome
goldenocean2 小时前
React之旅-05 List Key
前端·javascript·react.js