vue3防抖函数封装与使用,以指令的形式使用
utils/debounce.js
/*** 防抖函数* @param {*} fn 函数* @param {*} delay 暂停时间* @returns */
export function debounce(fn, delay = 500) {let timer = nullreturn function (...args) {// console.log(arguments);// const args = Array.from(arguments)if (timer) {clearTimeout(timer)}timer = setTimeout(() => {fn.apply(this, args)}, delay)}}
main.js 定义全局化指令
import { createApp } from 'vue'
import App from './App.vue'
import { debounce } from './utils/debounce'const app = createApp(App)// 创建全局指令
app.directive('debounce', {mounted(el, binding) {const { value, arg } = bindingconst debouncedFn = debounce(value, arg)el.addEventListener('click', debouncedFn) // 将事件改为click},beforeUnmount(el, binding) {const { value } = bindingel.removeEventListener('click', value)}
})app.mount('#app')
指令的使用
<template><button v-debounce="handleInput" :delay="500">无参</button><button v-debounce="() => handleInput2(1, 2)" :delay="500">传参</button>
</template>
<script>export default{methods: {handleInput(){console.log('防抖指令的使用');},handleInput2(v1, v2){console.log('接收参数', v1,v2);},}}
</script>
相关文章:
vue3防抖函数封装与使用,以指令的形式使用
utils/debounce.js /*** 防抖函数* param {*} fn 函数* param {*} delay 暂停时间* returns */ export function debounce(fn, delay 500) {let timer nullreturn function (...args) {// console.log(arguments);// const args Array.from(arguments)if (timer) {clearTim…...
Hive学习(13)lag和lead函数取偏移量
hive里面lag函数 在数据处理和分析中,窗口函数是一种重要的技术,用于在数据集中执行聚合和分析操作。Hive作为一种大数据处理框架,也提供了窗口函数的支持。在Hive中,Lag函数是一种常用的窗口函数,可以用于计算前一行…...
Centos Unable to verify the graphical display setup
ERROR: Unable to verify the graphical display setup. 在Linux下安装Oracle时 运行 ./runInstaller 报错 ERROR: Unable to verify the graphical display setup. This application requires X display. Make sure that xdpyinfo exist under PATH variable. No X11 DISPL…...
Java 说一下 synchronized 底层实现原理?
Java 说一下 synchronized 底层实现原理? synchronized 是 Java 中用于实现同步的关键字,它保证了多个线程对共享资源的互斥访问。底层实现涉及到对象头的 Mark Word 和锁升级过程。 synchronized 可以用于方法上或代码块上,分别对应于方法…...
nginx访问路径匹配方法
目录 一:匹配方法 二:location使用: 三:rewrite使用 一:匹配方法 location和rewrite是两个用于处理请求的重要模块,它们都可以根据请求的路径进行匹配和处理。 二:location使用: 1:简单匹配…...
偌依 项目部署及上线步骤
准备实验环境,准备3台机器 1.作为前端服务器,mysql,redis服务器--同时临时作为代码打包服务器 192.168.2.65 nginx-server 2.作为后端服务器 192.168.2.66 java-server-1 192.168.2.67 java-server-2 安装nginx/mysql #安装nginx [rootweb-nginx ~]…...
PHP特性知识点扫盲 - 上篇
概述 之前在分析thinkphp源码的时候,对依赖注入等等php高级的特性一直想做一个梳理和总结,一直没有时间,好不容易抽一点时间对技术的盲点做一个扫盲和总结。 特性 1.命名空间 命名空间是在PHP5.3中引入,是一个很重要的工具&am…...
Docker一键极速安装Nacos,并配置数据库!
1 部署方式 1.1 DockerHub javaedgeJavaEdgedeMac-mini ~ % docker run --name nacos \ -e MODEstandalone \ -e JVM_XMS128m \ -e JVM_XMX128m \ -e JVM_XMN64m \ -e JVM_MS64m \ -e JVM_MMS64m \ -p 8848:8848 \ -d nacos/nacos-server:v2.2.3 a624c64a1a25ad2d15908a67316d…...
交换机04_远程连接
通过远程管理方式连接交换机 1、telnet简介 telnet 是应用层协议 基于传输层TCP协议的,默认端口:23 采用的是明文密码方式 不是很安全,一般用于内网管理。 2、ssh协议简介 ssh 是应用层的协议,基于传输层的TCP协议&#x…...
ES6定义一个类(函数内部定义属性,,原型定义方法 ), 实现继承?
ES6中使用class关键字定义一个类,使用extends关键字实现继承。下面是一个示例: class Animal {constructor(name) {this.name name;}sayHello() {console.log(Hello, my name is ${this.name});} }class Dog extends Animal {constructor(name, breed)…...
使用 Process Explorer 和 Windbg 排查软件线程堵塞案例分享
目录 1、问题说明 2、线程堵塞的可能原因分析 3、使用Windbg和Process Explorer确定线程中发生了死循环 4、根据Windbg中显示的函数调用堆栈去查看源码,找到问题 4.1、在Windbg定位发生死循环的函数的方法 4.2、在Windbg中查看变量的值去辅助分析 4.3、是循环…...
“智慧”千里眼助力水泵站
泵站是为水提供势能和压能,解决无自流条件下的排灌、供水和水资源调配问题的唯一动力来源,在工农业用水、防洪、排涝和抗旱减灾等方面发挥着重要作用。一旦出现异常,对经济生产将造成难以估量的损失,给水利安全管理造成负担。因此…...
C++多态性——(5)运算符重载(第二节)
归纳编程学习的感悟, 记录奋斗路上的点滴, 希望能帮到一样刻苦的你! 如有不足欢迎指正! 共同学习交流! 🌎欢迎各位→点赞 👍 收藏⭐ 留言📝 身先才能率人,律己才能服人…...
ES -极客学习
Elasticsearch 简介及其发展历史 起源 Lucene 于 Java 语言开发的搜索引擎库类创建于 1999 年,2005 年成为 Apache 顶级开源项目Lucene 具有高性能、易扩展的优点Lucene 的局限性 只能基于 Java 语言开发类库的接口学习曲线陡峭原生并不支持水平扩展原生并不支持水…...
【大厂秘籍】系列 - Java多线程面试题
Java多线程面试题 友情提示,看完此文,在Java多线程这块,基本上可以吊打面试官了 线程和进程的区别 进程是资源分配的最小单位,线程是CPU调度的最小单位 线程是进程的子集,一个进程可以有很多线程,每条线…...
vue实现画笔回放,canvas转视频播放功能
示例图: 一、vue2版本 <template><div class"canvas-video"><canvasref"myCanvasByVideo"class"myCanvas"id"myCanvasByVideo":width"width":height"height"></canvas><d…...
Docker中镜像的相关操作
1.辅助操作 docker version:用查看docker客户端引擎和server端引擎版本信息。 docker info:用来查看docker引擎的详细信息。 docker --help:用来查看帮助信息。 2.镜像Image docker images:查看当前本地仓库中存在哪些镜像。 …...
[python]python利用pyaudio录制系统声音没有立体声混音怎么录制系统音频
当电脑没有立体声混音导致Python写代码无法使用pyaudio进行录制系统声音怎么办?查阅资料和安装驱动等方法都不行,难道没办法了吗?那为什么电脑其他软件可以做到呢?因此研究了一下pyaudio在没有立体声混音情况下确实无法录制声音&a…...
使用echarts的bmap配置项绘制区域轮廓遮罩
示例图 代码 <template><div id"map" style"width: 100%; height: 100vh"></div> </template><script> import * as echarts from "echarts"; import "echarts/extension/bmap/bmap"; export default…...
第3章 【课后习题】(完整版)
【3.18】写出下面程序的运行结果 //3.18写出下面程序的运行结果 #include <iostream> using namespace std; class test{public:test();~test() {};private:int i; }; test::test() {i25;for(int ctr0;ctr<10;ctr){cout<<"Counting at "<<ctr…...
日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下,越来越多的求职者将目光投向了日本及中日双语岗位。但是,一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧?面对生疏的日语交流环境,即便提前恶补了…...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注:文档 https://developers.weixin.qq…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解(完整版) 一、现代浏览器渲染流程(详细说明) 1. 构建DOM树 浏览器接收到HTML文档后,会逐步解析并构建DOM(Document Object Model)树。具体过程如下: (…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件(System Property Definition File),用于声明和管理 Bluetooth 模块相…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一) 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
Java 二维码
Java 二维码 **技术:**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...
网站指纹识别
网站指纹识别 网站的最基本组成:服务器(操作系统)、中间件(web容器)、脚本语言、数据厍 为什么要了解这些?举个例子:发现了一个文件读取漏洞,我们需要读/etc/passwd,如…...
人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验,我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育,这并非炒作,而是已经发生的巨大变革。教育机构和教育者不能忽视它,试图简单地禁止学生使…...
三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值,最大值左侧的数值严格单调递增,最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值,最小值左侧的数值严格单调递减,最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...
Vite中定义@软链接
在webpack中可以直接通过符号表示src路径,但是vite中默认不可以。 如何实现: vite中提供了resolve.alias:通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...
