vue 中使用 lodash Debounce防抖不生效

news2024/11/25 4:46:59

需求:搜索按钮增加防抖功能
代码1

<template>
    <el-button  type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
</template>
  
  <script>
import { debounce } from "lodash";
// 自定义搜索按钮,带防抖
export default {
    name: "SearchButton",
    props: {
        //默认等待1秒
        wait: {
            type: Number,
            default: 1000
        }
    },
    components: {},
    data () {
        return {

        };
    },
    mounted () {
        //防抖函数
        this.debounceClick=debounce(function(){
              console.log(111111);
         },this.wait)
     },
    methods: {
        /**
         * 点击事件
         */
        searchClick () {
            this.debounceClick()
        }
        //或是
        searchClick :debounce(function(){
              console.log(111111);
         },this.wait)
    }
};
  </script>
  

参考:
https://vuejs.org/guide/essentials/reactivity-fundamentals.html#stateful-methods
在这里插入图片描述
注:debounce返回的是一个函数,debounce后面增加()或直接在点击事件中调用是不行

 searchClick () {
 	//不执行
       debounce(function(){
         console.log(111111);
         },this.wait)
 }
 searchClick () {
   //每次都执行
         debounce(function(){
              console.log(111111);
         },this.wait)()
 }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2036010.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用Nvm切换nodeJs高版本之后,使用npm install一闪而过

先说现象,最近又有几个项目接手,其中有一个使用NVM切换至高版本node后,出现如下症状; 没有任何提示,然后翻看文件目录,node_modules目录没有创建,同时在全局 npm config set prefix 设置的目录下 多了一个 pgn的快捷,指向项目目录。 使用百度或者chart-gtp,搜索到的答案…

VSCODE ESP-IDF 内置 JTAG 接口断点单步调试笔记

环境配置 下载VSCODE之后&#xff0c;安装VSCODE的ESP-IDF插件。 还可安装c/c与python的语言插件 进行配置&#xff1a;ctrlshiftP 打开配置选项&#xff0c;输入ESP-IDF:Configure ESP-IDF extension 根据情况选择即可&#xff1a; 点击“Configure Tools” 出现…

echarts多条折线图,横轴相同问题

this.curveList [ { value: "5", collectTime: "13.14", signalName: "数据深" }, { value: "1", collectTime: "13.23", signalName: "数据深" }, { value: "20", collectTime: "13.14", s…

以一道面试题来探讨测试用例设计的六大思路

有这样一个面试题&#xff1a;在一个Web测试页面上&#xff0c;有一个输入框&#xff0c;一个计数器&#xff08;count&#xff09;按钮&#xff0c;用于计算一个文本字符串中字母a出现的个数。请设计一系列测试用例用以测试这个Web页面。 有经验的测试人员可能会问面试官&…

博途PLC FOR+CASE语句组合应用

CASE语句的使用可以参考下面文章链接&#xff1a; 1、CASE语句和定时器组合使用注意事项 CASE语句和定时器组合使用注意事项(SCL代码)_plc定时器可以放在case语句里面吗-CSDN博客文章浏览阅读283次。本文介绍了在使用CASE语句进行状态机流程控制时&#xff0c;如何结合定时器…

人工智能 | 通俗讲解AI基础概念

LLM LLM&#xff08;Large Language Models&#xff09;指的是大型语言模型。这些模型是自然语言处理&#xff08;NLP&#xff09;技术的一部分&#xff0c;使用深度学习训练来理解、生成、翻译文本&#xff0c;甚至执行特定的语言相关任务&#xff0c;如问答、文本摘要、编程…

Rancher的RKE和RKE2部署K8s集群kube-proxy开启strictARP

kube-proxy配置strictARPtrue 1、非RKE部署的K8s集群&#xff1a;配置首先&#xff0c;需要为kube-proxy启动strictARP&#xff0c;以便Kubernetes集群中的所有网卡停止响应其他网卡的ARP请求&#xff0c;而由OpenELB来处理ARP请求。 $ kubectl edit configmap kube-proxy -n…

关于k8s的pvc存储卷

目录 1.PVC 和 PV 1.1 PV 1.2 PVC 1.3 StorageClass 1.4 PV和PVC的生命周期 2.实战演练 2.1 创建静态pv 2.2 创建动态pv 3.总结 1.PVC 和 PV 1.1 PV PV 全称叫做 Persistent Volume&#xff0c;持久化存储卷。它是用来描述或者说用来定义一个存储卷的&#xff0c;…

Android SystemServer启动流程

文章目录 Android SystemServer启动流程概述流程图源码分析创建SystemServer进程启动SystemServer进程SystemServer#main()SystemServer#run()SystemServer#createSystemContext()SystemServer#startBootstrapServices()SystemServer#startCoreServices()SystemServer#startOth…

FFmpeg Filter过滤器实战

引文 - FFmpeg Filter的介绍 Filter&#xff0c;一般被译为"过滤器"或者"滤镜"&#xff0c;本篇文章统一以"过滤器"著称。 那么过滤器的作用是什么呢&#xff1f;FFmpeg中的过滤器系统是在解码之后、编码之前对媒体流进行处理的关键组件。 下…

Java面试八股之什么是MQTT协议

什么是MQTT协议 MQTT&#xff08;Message Queuing Telemetry Transport&#xff0c;消息队列遥测传输&#xff09;是一种轻量级的“发布/订阅”&#xff08;Publish/Subscribe&#xff09;模式的消息传输协议&#xff0c;特别适合于远程和低带宽网络环境&#xff0c;如物联网&…

【向量数据库】向量数据库的构建和检索

1、使用 sentence-transformers 将文本编码为向量 安装 sentence-transformers&#xff1a; pip install -U sentence-transformers在 huggingface 下载 all-MiniLM-L6-v2 模型权重&#xff08;1_Pooling 是文件夹&#xff0c;里面包含一个 config.json 文件&#xff09;&…

Qt内存泄漏与程序异常崩溃

内存泄漏 什么是内存泄漏&#xff1f; 内存泄漏&#xff08;Memory Leak&#xff09;指的是程序在动态分配内存后未能正确释放已分配的内存&#xff0c;导致这些内存块无法被再次使用或回收。内存泄漏的发生主要是在使用堆内存&#xff08;通过new或malloc分配的内存&#xf…

ZBrush入门使用介绍——8、模型网格显示隐藏和遮罩操作

大家好&#xff0c;我是阿赵。   有时候我们需要把需要雕刻的范围限制在某个局部&#xff0c;之前也介绍过一些方法&#xff0c;比如使用遮罩。这里再详细说一下具体的操作。这次我拿这个圆柱为例子&#xff0c;先生成多边形网格&#xff0c;再CtrlD几次增加一点细分级别。 …

【css】使用!important提升选择器的优先级

背景 昨天我的个人博客备案通过了嘛&#xff0c;然后我就想着完善页面底部的备案信息&#xff0c;参考Argon主题博客美化的 网站底部信息 但是我想要把icp备案和公安联网备案的信息分开&#xff0c;即 subject-value-value 的结构&#xff0c; 因为 value 的选择器里面写的是…

ThinkPHP教程

thinkPHP笔记 01. phpEnv配置安装 主讲老师 - 李炎恢 1. 学习基础 ThinkPHP8.x: 前端基础:HTML5/CSS(必须)、JavaScript(可选、但推荐有);后端基础:PHP基础,版本不限,但不能太老,至少PHP5.4以上语法,TP8是兼容PHP8.x的;数据库基础:MySQL数据库,掌握了常规的SQL…

uni-app总结

1. <u-form-item label"报废人" ><u--input v-model"model.remark" border"bottom" placeholder"请输入"></u--input> </u-form-item> border"bottom" 报废日期 为了

【海贼王航海日志:前端技术探索】一篇文章带你走进JavaScript(一)

目录 1 -> 初识JavaScript 1.1 -> JavaScript是什么 1.2 -> 发展历史 1.3 -> JavaScript和HTML和CSS之间的关系 1.4 -> JavaScript运行过程 1.5 -> JavaScript的组成 2 -> 前置知识 2.1 -> JavaScript的书写形式 2.2 -> 注释 2.3 -> 输…

Stable Diffusion-inpaint(mask补全)是怎么做的?

AIGC专栏4——Stable Diffusion原理解析-inpaint修复图片为例_diffusion inpaint-CSDN博客 如果我们必须训练一个inpaint模型才能对当前的模型进行inpaint&#xff0c;那就太麻烦了&#xff0c;有没有什么方法可以不需要训练就能inpaint呢&#xff1f; Stable Diffusion就是一…

Unity新输入系统 之 InputAction(输入配置文件最基本的单位)

本文仅作笔记学习和分享&#xff0c;不用做任何商业用途 本文包括但不限于unity官方手册&#xff0c;unity唐老狮等教程知识&#xff0c;如有不足还请斧正​ 首先你应该了解新输入系统的构成结构&#xff1a;Unity新输入系统结构概览-CSDN博客 Input System - Unity 手册 1.In…