前端菜鸡流水账日记 -- setTimeout定时器

中午好哇,一上午的时间过的真快,这都快要吃午饭啦,突击询问有想好吃什么吗???当然,这不是重点,重点是我今天要说的这个定时器,以及和他搭配的取消定时器,话不多说,开始我们的新内容

setTimeout都不陌生就是定时器,他可以这样用

  setTimeout(() => {dealData.forEach(e=>{if(aw(e).quan){p.planList.push({planid:aw(e).planId,quan:aw(e).quan,detai:aw(e).detai})}})

或者是

  setTimeout(()=>{policeFormRef.value.init()})

再或者

let timear = setTimeout(() => {resolve(true)}, 50);

等等等等很多用法,只要是可以用得到定时器的地方,功效还是很大的1000=1s哦,基本格式也简单就是setTimeout(()) = 》{ }

说完了setTimeout这个定时器,跟他打配合的当然是清除定时器clearTimeout(),它 是JavaScript中的一个函数,用来取消由setTimeout设置的定时器

在Vue.js环境中使用此函数时,你可能会在以下场景见到它:

  1. 组件卸载前清理资源:为了防止内存泄漏,在Vue组件的生命周期钩子beforeUnmountunmounted中,可以调用clearTimeout来取消尚未执行的定时任务。

  2. 表单验证、输入提示等交互控制:在用户交互过程中,如果需要根据特定条件启动一个定时器(比如显示提示信息一段时间后自动隐藏),那么在条件改变时(如用户输入、点击按钮等),可以通过clearTimeout来取消旧的定时器并重新设置,以保证UI行为的准确性

下边是一个例子:

<template><button @click="startTimer">开始计时</button><button @click="stopTimer">停止计时</button>
</template><script>
export default {setup() {let timerId = null;const startTimer = () => {timerId = setTimeout(() => {console.log('计时结束');}, 5000);};const stopTimer = () => {if (timerId) {clearTimeout(timerId);timerId = null;console.log('计时已停止');}};return {startTimer,stopTimer,};},
};
</script>

在这个例子中,当用户点击“开始计时”按钮时,会启动一个5秒后的计时任务;点击“停止计时”按钮,则会取消这个计时器。 

代码中使用到的像这样

    let timear = setTimeout(() => {clearTimeout(timear)resolve(true)}, 50);}

在内部,自己使用完自己消除,避免造成内存多余的占用,或者出现其他的bug

好啦,这就是这篇文章我要说的内容啦,下次见 

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

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

相关文章

浏览器f12控制台怎么获取vue实例,并且修改data数据

我们在日常的生产工作中&#xff0c;经常会遇到一些问题&#xff0c;比如&#xff0c;若产品已经部署&#xff0c;或是目前无法查看源代码&#xff0c;或者向用命令直接修改查询默认表单数据&#xff0c;那我们怎么去查看Vue实例呢&#xff1f; 我们在浏览器直接打印this不能得…

camx-打开相机预览hal3接口流程

open -》 initialize -》configure_streams -》process_capture_request -》process_capture_result。 initialize&#xff1a;该方法必须在camera_moudel_t中的open方法之后&#xff0c;其它camera3_device_ops中方法之前被调用&#xff0c;主要用来将上层实现的回调方法注册…

基于JSP技术的弹幕视频网站系统

开头语 你好&#xff0c;你好呀&#xff0c;我是计算机学长猫哥&#xff01;如果有相关需求&#xff0c;可以通过文末的联系方式找到我。 开发语言 JSP 数据库 MySQL 技术 JSP JavaBeans 工具 MyEclipse、Tomcat、Navicat 系统展示 首页 用户登录界面 视频信息界面…

《跟我一起学“网络安全”》——等保风评加固应急响应

等保风评加固应急响应 一、安全加固 背景 随着IP技术的飞速发展&#xff0c;一个组织的信息系统经常会面临内部和外部威胁的风险&#xff0c;网络安全已经成为影响信息系统的关键问题。 虽然传统的防火墙等各类安全产品能提供外围的安全防护&#xff0c;但并不能真正彻底的消…

新闻稿标题怎么写吸引人?建议收藏

一个好的标题&#xff0c;不仅能激发读者的好奇心&#xff0c;还能引导他们继续深入了解文章内容。本文伯乐网络传媒将为你揭秘新闻稿标题写作的十大技巧&#xff0c;让你轻松写出吸引人的标题。 1. 激发好奇心 a. 提出疑问&#xff1a;以问句的形式提出问题&#xff0c;让读者…

C# Winform图形绘制

WinForms 应用程序中的控件是基于窗体的&#xff0c;当控件需要重绘时&#xff0c;它会向父窗体发送一个消息请求重绘。但是&#xff0c;控件本身并不直接处理绘制命令&#xff0c;所以你不能直接在控件上绘制图形。 解决方法&#xff1a; 重写控件的OnPaint方法使用CreateGr…

推荐3款轻量的window工具,免费好用

Rufus Rufus是一个制作U盘启动的工具&#xff0c;可以将window和linux操作系统制作成U盘启动&#xff0c;方便安装系统。 DesktopOK DesktopOK是一个电脑桌面图标备份工具&#xff0c;支持备份多个时间节点的桌面信息。一旦你的电脑桌面由于游戏或者其他软件导致你的桌面变得乱…

5.华为交换机局域网vlan网段隔离配置

目的:PC1与PC2互通 与PC3隔离 LSW1配置 [Huawei]vlan batch 10 20 [Huawei]int g0/0/1 [Huawei-GigabitEthernet0/0/1]port link-type access [Huawei-GigabitEthernet0/0/1]port default vlan 10 [Huawei-GigabitEthernet0/0/1]int g0/0/2 [Huawei-GigabitEthernet0/0/2]port…

线程相关的基本方法

1.线程等待&#xff08;wait&#xff09; 调用该方法后&#xff0c;线程会释放锁&#xff1b;线程进入到WATING状态&#xff1b;调用notifyAll()和notify()进行唤醒。 2.线程睡眠&#xff08;sleep&#xff09; 调用该方法不会释放锁(抱着锁睡)&#xff1b;线程进入TIMED-…

C#调用OpenCvSharp和SkiaSharp绘制图像直方图

最近在B站上学习OpenCv教程&#xff0c;学到图像直方图&#xff0c;后者描述的是不同色彩在整幅图像中所占的比例&#xff08;统计不同色彩在图像中的出现次数&#xff09;&#xff0c;可以对灰度图、彩色图等计算并绘制图像直方图。本文学习OpenCvSharp中与计算直方图相关的函…

Unity3D MMORPG背包系统数据获取与通讯详解

在Unity3D开发的大型多人在线角色扮演游戏&#xff08;MMORPG&#xff09;中&#xff0c;背包系统是一个至关重要的功能。玩家通过背包来管理、查看和使用他们获得的物品。背包系统不仅需要处理本地数据的存储和显示&#xff0c;还需要与服务器进行通讯&#xff0c;确保数据的同…

PS插件创成式填充功能全面测评:轻松实现AI修图新高度

大家好&#xff0c;我是你们的AIGC测评博主。今天&#xff0c;我将为大家带来一款ps插件创成式填充功能——深度体验 在图像处理领域&#xff0c;AI技术的应用已经越来越广泛。而创成式填充功能&#xff0c;无疑是其中的佼佼者。它利用AI技术&#xff0c;能够根据用户输入的关…

数据库系统概论(个人笔记)(第四部分)

数据库系统概论&#xff08;个人笔记&#xff09; 文章目录 数据库系统概论&#xff08;个人笔记&#xff09;4、中间的SQL4.1 连接表达式4.2 视图4.3 事务4.4 完整性约束4.5 SQL数据类型和模式4.6 SQL中的索引定义4.7 授权 4、中间的SQL 4.1 连接表达式 Join Expressions Join…

24.自定义python日志handler

自定义logger 功能代码逻辑说明 功能 可实现日志打印在控制台的同时&#xff0c;输出到文件中 且文件根据%Y%m%d或者%Y%m%d%H自动决定按天还是按小时分割 代码比较简单&#xff0c;比直接用自带的方便一些 代码 import sys import tracebackimport os as _os import logging…

使用mysqldump导出mysql数据库的数据

使用mysqldump导出mysql数据库的数据 mysqldump是mysql自带的一个工具&#xff0c;路径一般是C:\Program Files\MySQL\MySQL Server 5.7\bin\mysqldump.exe 有点需要导出的数据库&#xff0c;选择导入/导出&#xff0c;选择用mysqldump导出 在使用 IntelliJ IDEA 通过 mysqldum…

车载ADAS面试题,零基础也能看得懂!

周一来刷刷ADAS相关的面试题吧&#xff01;相信看完这些题目&#xff0c;你会对ADAS有个更清晰的认识&#xff0c;即使你是零基础也可以轻松明白&#xff01; 1、描述 ADAS 系统的基本组成和功能 答案&#xff1a;高级驾驶辅助系统&#xff08;ADAS&#xff09;是一套融合了多种…

Mathtype插入word,以及mathtype在word上的卸载

1.Mathtype插入word 花了两个小时&#xff0c;最终得出的极品简单的安装方法&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; mathype下载地址&#xff1a;https://store.wiris.com/zh/products/mathtype/download/windows 下载完傻瓜式安装&#xff0c;不要…

CAD二次开发(9)- CAD中对象的实时选择

1. 点的拾取 有时候我们需要在CAD画布上实时选取起始点和结束点&#xff0c;然后绘制出来一条直线。实现如下&#xff1a; public void getPoint(){var doc Application.DocumentManager.MdiActiveDocument;var editor doc.Editor;var docDatabase doc.Database;PromptPoi…

手写操作系统

对喜欢操作系统的伙伴强推一门课程 从0开始实现了支持文件系统、任务切换和网络协议栈的操作系统。 具体见 &#xff1a;http://www.ziyuanwang.online/977.html

三星(中国)投资公司线上入职测评笔试邀请数字推理语言逻辑真题题库

三星&#xff08;中国&#xff09;有限公司北京分公司 邀请您参加 SHL线上笔试 具体安排如下&#xff1a; 笔试时间&#xff1a;周三 9:00 笔试时长&#xff1a;1.5h ~ 2h 笔试内容及要求&#xff1a;数字推理限时30min&#xff1b;语言逻辑限时30min&#xff1b;性格测试不…