Vue3 自定义指令实现元素点击的节流与输入框的防抖,后端老哥再也不用担心我频繁发送请求了

简介: Vue3 自定义指令实现元素点击的节流与输入框的防抖,后端老哥再也不用担心我频繁发送请求了

在我们项目开发的时候,很多时候都会用到节流和防抖来防止用户频繁操作从而造成资源与服务器的浪费。所以作为一个前端我们往往需要在合适的位置加上防抖或者节流。本篇文章将介绍如何使用 Vue3 自定义指令的方式实现元素点击节流指令v-throttleClick和输入框的防抖指令v-debounceInput


防抖和节流的定义



在开始之前,我们先了解一下什么是防抖,什么是节流。

防抖是指当你触发一个事件的时候,它的回调不会立即执行,而是在 n 秒之后执行,但当在这 n 秒之内你又触发了这个事件,则会重新计时,也就是你还需要再等 n 秒才会执行。

节流是指当你触发一个事件的时候,它会立刻执行回调,但是如果你在 n 秒之内再次触发,回调不再执行,也就是说单位时间内触发事件只会执行一次回调

了解了防抖和节流之再看如何实现v-throttleClickv-debounceInput


元素点击节流:v-throttleClick



我们先看下v-throttleClick要实现的效果:指令接受一个回调函数,当给元素绑定这个指令的时候,点击该元素则会以节流的形式触发改回调函数。同时接收一个 arg 作为节流事件,默认 1000ms

实现起来其实很简单

<template>
  <button v-throttleClick:2000="kfc50">点击V我50吃鸡脚</button>
</template>
<script setup>
const vThrottleClick = (el, bind) => {
  let isPass = true;
  el.addEventListener("click", () => {
    if (typeof bind.value !== "function") return;
    if (isPass) {
      bind.value();
      isPass = false;
      setTimeout(() => {
        isPass = true;
      }, bind.arg || 1000);
    }
  });
};
const kfc50 = () => {
  console.log("+50");
};
</script>

然后我们频繁点击按钮看效果

image.png

但是如果我们直接在回调函数中传参,函数就会立即执行,比如

<button v-throttleClick:2000="kfc50(1)">点击V我50吃鸡脚</button>

并且点击之后也不会进入逻辑判断,因为 bind.value 不再是个函数。所以如果有传参需求,则需要将回调写成高阶函数形式

const kfc50 = (arg1) => {
  return () => {
    console.log(arg1);
  };
};

到这里一个简单的v-throttleClic指令就完成了。那么它可以用作什么场景呢? 比如你有一个搜索按钮,你肯定不能在用户疯狂点击的时候一直发请求吧,那就加一个 v-throttleClick 指令吧


输入框防抖v-debounceInput



假如你有这样一个需求,用户不停的在输入框输入内容,当用户停止输入的时候再触发搜索向后台发送请求。这时候聪明的你一定想到了防抖(你慢慢抖吧,等你抖完了我再给请你吃 kfc)

同样的指令接收一个 arg 和 value,直接看代码实现

<template>
  <input v-debounceInput:500="toKfc" />
</template>
<script setup>
const vDebounceInput = (el, bind) => {
  if (typeof bind.value !== "function") return;
  bind.value.id = null;
  el.addEventListener("input", () => {
    clearTimeout(bind.value.id);
    bind.value.id = setTimeout(() => {
      bind.value();
    }, bind.arg || 1000);
  });
};
const toKfc = () => {
  console.log("优弧请我吃kfc");
};
</script>

然后我们看下效果

image.png


全局注册指令



如果我们想要在每个组件都能使用这两个指令,我们可以将其注册到全局。我们可以在 main.js 中进行注册,以 debounceInput 为例

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
const app = createApp(App);
app.directive("debounceInput", (el, bind) => {
  if (typeof bind.value !== "function") return;
  bind.value.id = null;
  el.addEventListener("input", () => {
    clearTimeout(bind.value.id);
    bind.value.id = setTimeout(() => {
      bind.value();
    }, bind.arg || 1000);
  });
});
app.mount("#app");


写在最后



vue 的自定义指令在平时工作中用到的地方还是很多的,比如权限管理,事件埋点等等都可以使用指令实现,非常的方便,所以对 vue 自定义指令还不熟悉的小伙伴可以直接到官网查看文档


相关文章
|
20天前
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
78 2
|
2月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
5天前
|
JavaScript 前端开发
vue3教程,如何手动获取后端数据(入门到精通3,新人必学篇)
本文提供了一个Vue 3教程,讲解了如何使用axios库手动从后端获取数据,包括安装axios、配置后端访问地址、编写路由地址、发起HTTP请求以及在组件中读取和打印响应数据的步骤。
28 0
vue3教程,如何手动获取后端数据(入门到精通3,新人必学篇)
|
6天前
|
前端开发 Java
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例
文章介绍了如何使用SpringBoot创建简单的后端服务器来处理HTTP请求,包括建立连接、编写Controller处理请求,并返回响应给前端或网址。
16 0
学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例
|
20天前
|
JSON JavaScript 前端开发
js请求后端9
js请求后端9
31 2
|
18天前
|
小程序 PHP
微信小程序给 thinkphp后端发送请求出现错误 Wrong number of segments 问题的解决 【踩坑记录】
本文记录了微信小程序向ThinkPHP后端发送请求时出现"Wrong number of segments"错误的解决方法。问题原因是小程序请求header中的token变量名写错,导致token未正确传递至后端。作者提供了详细的检查步骤和建议,包括验证URL路径、参数规范和路由配置的匹配,以确保请求能正确发送和处理。
|
2月前
|
小程序 安全
Fiddler抓取小程序后端请求导入AppScan扫描快捷方法
【8月更文挑战第26天】这是一种利用 Fiddler 捕获小程序后端请求并导入 AppScan 进行安全扫描的方法。首先安装配置 Fiddler 并设置手机代理,通过 Fiddler 捕获请求;接着导出这些请求为 .saz 文件,并在 AppScan 中导入此文件,配置扫描参数后启动扫描以检测安全漏洞。操作时需确保有合法授权并遵循相关法规。尽管不同版本软件操作细节可能有所不同,但整体流程类似。
|
2月前
|
存储 缓存 移动开发
不来看一看HTML请求后端性能优化的实战总结吗?
本文主要总结了在ICBU的核心沟通场景下服务端在此次性能优化过程中做的工作,供大家参考讨论。
|
2月前
|
JavaScript UED
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
以 Vue 3 项目为例,多个请求下如何全局封装 Loading 的展示与关闭?其中大有学问!
|
2月前
|
API
【Azure API 管理】在 Azure API 管理中使用 OAuth 2.0 授权和 Azure AD 保护 Web API 后端,在请求中携带Token访问后报401的错误
【Azure API 管理】在 Azure API 管理中使用 OAuth 2.0 授权和 Azure AD 保护 Web API 后端,在请求中携带Token访问后报401的错误

热门文章

最新文章