前端学习<四>JavaScript——定时器

devtools/2024/9/23 23:24:10/

定时器的常见方法

  • setInterval():循环调用。将一段代码,每隔一段时间执行一次。(循环执行)

  • setTimeout():延时调用。将一段代码,等待一段时间之后再执行。(只执行一次)

备注:在实际开发中,二者是可以根据需要,互相替代的。

setInterval() 的使用

setInterval():循环调用。将一段代码,每隔一段时间执行一次。(循环执行)

参数

  • 参数1:回调函数,该函数会每隔一段时间被调用一次。

  • 参数2:每次调用的间隔时间,单位是毫秒。

返回值:返回一个Number类型的数据。这个数字用来作为定时器的唯一标识,方便用来清除定时器。

定义定时器

方式一:匿名函数

每间隔一秒,将 数字 加1:

     let num = 1;setInterval(function () {num ++;console.log(num);}, 1000);

方式二:

每间隔一秒,将 数字 加1:

     setInterval(fn,1000);​function fn() {num ++;console.log(num);}​

清除定时器

定时器的返回值是作为这个定时器的唯一标识,可以用来清除定时器。具体方法是:假设定时器setInterval()的返回值是参数1,那么clearInterval(参数1)就可以清除定时器。

setTimeout()的道理是一样的。

代码举例:

 <script>let num = 1;​const timer = setInterval(function () {console.log(num);  //每间隔一秒,打印一次num的值num ++;if(num === 5) {  //打印四次之后,就清除定时器clearInterval(timer);}​}, 1000);</script>​

setTimeout() 的使用

setTimeout():延时调用。将一段代码,等待一段时间之后再执行。(只执行一次)

参数

  • 参数1:回调函数,该函数会每隔一段时间被调用一次。

  • 参数2:每次调用的间隔时间,单位是毫秒。

返回值:返回一个Number类型的数据。这个数字用来作为定时器的唯一标识,方便用来清除定时器。

定义和清除定时器

代码举例:

     const timer = setTimeout(function() {console.log(1); // 3秒之后,再执行这段代码。}, 3000);​clearTimeout(timer);​

代码举例:(箭头函数写法)

     setTimeout(() => {console.log(1); // 3秒之后,再执行这段代码。}, 3000);

setTimeout() 举例:5秒后关闭网页两侧的广告栏

假设网页两侧的广告栏为两个img标签,它们的样式为:

 <style>......​</style>​

5秒后关闭广告栏的js代码为:

     <script>window.onload = function () {//获取相关元素var imgArr = document.getElementsByTagName("img");//设置定时器:5秒后关闭两侧的广告栏setTimeout(fn,5000);function fn(){imgArr[0].style.display = "none";imgArr[1].style.display = "none";}}</script>


http://www.ppmy.cn/devtools/13225.html

相关文章

支付宝常见的支付方式有哪些?

支付宝常见的支付方式有哪些&#xff1f; 支付宝&#xff0c;作为中国最大的电子支付平台&#xff0c;提供了多种多样的线上支付方式&#xff0c;为用户提供了便捷、安全的支付体验。以下是一些常见的支付宝线上支付方式&#xff1a; 1. **支付宝余额支付**&#xff1a;用户可…

多商家AI智能名片商城系统(开源版)——构建高效数字化商业新生态

一、项目概述 1、项目背景 1&#xff09;起源 随着数字化时代的快速发展&#xff0c;传统名片和商城系统已经难以满足企业日益增长的需求。商家需要更高效、更智能的方式来展示自己的产品和服务&#xff0c;与消费者进行互动和交易。同时&#xff0c;开源技术的普及也为开发…

LESS vs. SCSS:选择何种CSS预处理器?

CSS 预处理器如 LESS 和 SCSS 已成为现代 Web 开发中不可或缺的工具&#xff0c;它们为原生 CSS 提供了强大的变量、嵌套、混合&#xff08;Mixins&#xff09;、运算等高级特性&#xff0c;显著提升了样式表的可维护性和开发效率。尽管功能相似&#xff0c;LESS 和 SCSS 在语法…

Redis底层数据结构之IntSet

目录 一、概述二、IntSet结构三、自动升级 上一篇 redis底层数据结构之Dict 下一篇 Redis底层数据结构之ZSkipList 一、概述 IntSet是一个存储整数值的集合&#xff0c;内部使用有序、无重复的数组保存数据。优点:节省内存空间。高效的查找、插入和删除操作。使用场景: 在集合…

SQLSERVER对等发布问题处理

问题1&#xff1a; 无法对 数据库Sast_Business 执行 删除&#xff0c;因为它正用于复制。 (.Net SqlClient Data Provider) 处理&#xff1a; USE [master]; GO EXEC sp_replicationdboption dbname NSast_Business, optname Npublish, value Nfalse; EXEC sp_replica…

09—DOM和BOM

一、DOM 1、HTML DOM (文档对象模型) 文档对象模型&#xff08;Document Object Model&#xff0c;DOM&#xff09;是表示和操作HTML和XML文档内容的基础API。当网页被加载时&#xff0c;浏览器会根据DOM模型&#xff0c;将结构化文档&#xff08;比如HTML和XML&#xff09;解…

数据科学与大数据(3)

数据分析&#xff0c;它不应该是在一个不适合的工具下生搬硬套 工具为具体的场景服务&#xff0c;换一个场景大概率会很鸡肋&#xff0c;对于一个成熟的分析师来说&#xff0c;十八般武艺样样精通到后期为常态&#xff0c;不要产生工具上的路径依赖&#xff0c;不要想着学一个工…

linux负载均衡 和 系统负载分析笔记

1 负载均衡 1.1 计算负载 1.1.1 PELT算法简介 从Linux3.8内核以后进程的负载计算不仅考虑权重&#xff0c;⽽且跟踪每个调度实体的历史负载情况&#xff0c;该算法称为PELT(Per-entity Load Tracking) 《奔跑吧Linux内核》卷1&#xff1a;基础架构&#xff1b;P505 相关资料…