JavaScript防抖函数执行多个事件处理函数,监听浏览器窗口拖拽事件(Vue防抖函数执行多个事件处理函数)

简介:当用户调整浏览器窗口大小时,浏览器会触发 resize 事件。通常,我们希望在窗口大小改变时执行一些操作,但是如果用户频繁调整窗口大小,可能会导致这些操作被频繁触发,影响页面性能和用户体验。这时候,防抖函数就派上了用场。这里来记录一下

防抖函数:就是某一高频事件不断被触发时,仅在最后一次真正执行事件处理代码,将多次执行变为最后一次执行;

这里我们使用防抖函数来监听浏览器窗口拖拽事件:

//定义防抖函数
debounce(func, wait) {let timeout;return function () {const context = this;const args = arguments;const later = function () {timeout = null;func.apply(context, args);};clearTimeout(timeout);timeout = setTimeout(later, wait);};
},

然后直接调用:

//mounted() {window.addEventListener("resize",this.debounce(() => {this.initCanvas();this.getImage();}, 5000)); // 5000 毫秒即 5 秒//},

可以看到,给window窗口添加了 resize 监听事件,5秒执行一次。

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

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

相关文章

Java调用WebServices接口

当拿到一个WebServices接口时,首先用接口测试工具调用一下接口,看是否可以正常发送请求和获取返回接口,确保接口是没有问题的,可以用SoapUI工具进行测试。 下面以一个免费的天气预报接口为例,记录整个接口的调用过程。…

初学python记录:力扣2007. 从双倍数组中还原原数组

题目: 一个整数数组 original 可以转变成一个 双倍 数组 changed ,转变方式为将 original 中每个元素 值乘以 2 加入数组中,然后将所有元素 随机打乱 。 给你一个数组 changed ,如果 change 是 双倍 数组,那么请你返…

Python基础:【练手小实验系列】面向对象编程

文章目录 题目练习题1: 定义一个点类练习题2: 创建一个矩形类练习题3: 银行账户类练习题4: 学生信息管理练习题5: 车辆管理系统参考答案练习题1: 定义一个点类练习题2: 创建一个矩形类练习题3: 银行账户类练习题4: 学生信息管理练习题5: 车辆管理系统题目 练习题1: 定义一个点…

如何解决PPT中获取加载项是灰色的,无法链接到Power BI的问题?

问题描述: 最近有朋友留言询问:“在尝试之前我发布的如何在PPT中展示Power BI报告的操作步骤的时候,想要在PPT中展示Power BI报告?只需这样做! (qq.com) 碰到在PowerPoint中【获取加载项选项】是灰色,无法链加载Powe…

CompletableFuture学习

学习目标: 记录学习CompletableFuture的过程 一周掌握 CompletableFuture 学习: CompletableFuture的在工作中的使用 目的: CompletableFuture的使用灵活使用CompletableFuture进行接口优化 使用runAsync,结果无返回值 Execut…

【数据库】Oracle11g与Oceanbase3.2.3对比

一、数据库体系结构对比 数据库的体系结构是从某一个角度来分析和考察数据库的组成、工作过程与原理,以及数据在数据库中的组织与管理机制。 Oracle11g作为传统关系数据库的代表、Oceanbase作为分布式关系数据库的代表,体系结构上的设计差别很大。 &a…

【NLP】大语言模型基础之Transformer结构

大语言模型基础之Transformer结构 1. Transformer结构总览2. 嵌入表示层2. 注意力层3. 前馈层4. 残差连接与层归一化5. 编码器和解码器结构参考文献 Transformer是一种深度学习模型架构,由Vaswani等人于2017年在论文《Attention is All You Need》中首次提出。它在自…

【练习】二分查找思想

🎥 个人主页:Dikz12🔥个人专栏:算法(Java)📕格言:吾愚多不敏,而愿加学欢迎大家👍点赞✍评论⭐收藏 目录 二分查找算法介绍 1.二分查找 题目描述 讲解 ​编辑 代码实现 2.…

STM32应用开发——BH1750光照传感器详解

STM32应用开发——BH1750光照传感器详解 目录 STM32应用开发——BH1750光照传感器详解前言1 硬件介绍1.1 BH1750简介1.2 硬件接线 2 软件编程2.1 软件原理2.1.1 IIC设备地址2.1.2 IIC读写2.1.3 BH1750指令集2.1.4 BH1750工作流程2.1.5 BH1750测量模式 2.2 测试代码2.3 运行测试…

【剪映专业版】10时间线工具:主轨磁吸、自动吸附、联动、预览轴、全局缩放预览

视频课程:B站有知公开课【剪映电脑版教程】 主轨:有封面标志的轨道才是主轨。 主轨磁吸:开启后,在主轨上移动素材,自动向前磁吸,在其他轨道上移动无此效果;关闭后,不自动向前磁吸&…

6个步骤轻松实现Postman接口压力测试(建议收藏)

🍅 视频学习:文末有免费的配套视频可观看 🍅 关注公众号:互联网杂货铺,回复1 ,免费获取软件测试全套资料,资料在手,涨薪更快 这里讲是postman做接口并发测试,基础用法不做…

这些年背过的面试题--MySQL篇

MySQL一直是面试中的热点问题,也难道了很多的面试者。其实MySQL没那么难,只是大家没有系统化、实战性的过去学习、总结。同时很多开发者在实际的开发过程中也很少去接触一些偏向底层的知识。 本手册,已总结成完整的PDF文档。想获取该文档&am…

opencv的cmake报错

opencv编译报错 CMakeDownloadLog.txt #use_cache "D:/opencv/.cache" #do_unpack "ippicv_2021.8_win_intel64_20230330_general.zip" "71e4f58de939f0348ec7fb58ffb17dbf" "https://raw.githubusercontent.com/opencv/opencv_3rdparty/1…

遇事不决 量子力学?

文章目录 引入量子力学产生的必然性量子力学名称的由来粒子?波?波粒二象性测不准原理 (不确定原理)叠加态原理 量子纠缠态叠加量子纠缠量子纠缠实验 逻辑判断,量子力学到底完善吗观测量子纠缠?那我们宏观世…

快慢指针的应用

快慢指针的原理 快慢指针是利用两个指针移动速度的不一样,实现一些有趣的追击行为。就像上学时求解的那些操场上的追击问题一样。 问题1:判断两个链表是否相交。(链表不存在环结构) 形如: 方法:循环第一…

谷歌开源专业代码模型:对硬件要求低,性能超强!

谷歌发布了面向企业、开发人员的全新代码模型Code Gemma,一共有基础预训练、指令微调和快速推理三个版本。 Code Gemma是基于谷歌在今年2月发布的Gemma模型之上开发而成。其参数很小只有20亿和70亿两种,但使用了超过5000亿tokens的代码、数学、文本等数…

Hive字符串匹配函数 LIKE 和 RLIKE 使用示例

Hive字符串匹配函数 LIKE 和 RLIKE 使用示例 1. 在Hive中, LIKE 和 RLIKE 是用于模式匹配的函数,用于在查询中进行字符串匹配。以下是它们的用法总结: LIKE: LIKE 函数用于在Hive中进行简单的模式匹配,通常用于匹配固…

vue2和vue3的v-if与v-for优先级对比

Vue.js 中使用最多的两个指令就是 v-if 和 v-for,因此我们可能会想要同时使用它们。虽然官方不建议这样做,但有时确实是必须的,我们来了解下他们的工作方式: 在 vue 2.x 中,在一个元素上同时使用 v-if 和 v-for 时&am…

【第七届openGauss技术文章征集】 openGauss新版本征文活动来啦!

活动背景 2024年3月30日,openGauss 6.0.0版本正式上线,该版本与之前版本特性功能保持兼容,在内核能力、DataPod三层资源池化架构、DataKit数据全生命周期管理平台、生态兼容性等方面全面增强。(下方【点击原文】即可查看更多【新…

【GPT-4最新研究】GPT-4与科学探索:揭秘语言模型在科学领域的无限可能

各位朋友们,你们知道吗?自然语言处理领域最近取得了巨大的突破!大型语言模型(LLM)的出现,简直就像打开了新世界的大门。它们不仅在语言理解、生成和翻译方面表现出色,还能涉足许多其他领域&…