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

ops/2024/9/23 6:22:40/

定时器的常见方法

  • 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/ops/13130.html

相关文章

【C++ 多态】带你详细了解虚函数表

文章目录 1.一道面试题 -- 引入虚函数表2.多态是怎么实现的呢&#xff1f;2.1满足多态的时候&#x1f427;2.2不满足多态的时候&#x1f427; 3.打印虚函数表 1.一道面试题 – 引入虚函数表 ①&#x1f34e; _vfptr 虚表指针&#xff0c;虚表指针是用来实现多态的 &#xff08…

C/C++语言与MySQL交互的代码实现

文章目录 一、数据库连接和准备二、数据库操作a.基础b.查询c.删除d.更新 环境配置&#xff1a;Clion连接MySQL数据库 确保你的数据库已经在运行了&#xff0c;才能用C语言连接。 如果没有运行&#xff0c;则会报错&#xff1a; 数据库连接失败: Cant connect to MySQL server …

【QT进阶】Qt Web混合编程之CMake VS2019编译并使用QCefView(图文并茂超详细版本)

往期回顾 【QT进阶】Qt Web混合编程之CEF、QCefView简单介绍-CSDN博客 【QT进阶】Qt Web混合编程之VS2019 CEF的编译与使用&#xff08;图文并茂超详细介绍&#xff09;-CSDN博客【QT进阶】Qt Web混合编程之QWebEngineView基本用法-CSDN博客【QT进阶】Qt Web混合编程之VS2019 C…

python后端相关知识点汇总(十二)

python知识点汇总十二 1、什么是 C/S 和 B/S 架构2、count(1)、count(*)、count(列名)有啥区别&#xff1f;3、如何使用线程池3.1、为什么使用线程池&#xff1f; 4、MySQL 数据库备份命令5、supervisor和Gunicorn6、python项目部署6.1、entrypoint.sh制作6.2、Dockerfile制作6…

多模态大模型训练数据以及微调数据格式

多模态数据&#xff0c;尤其是中文多模态数据&#xff0c;找一些中文多模态的数据 中文多模态数据集汇总_数据集-阿里云天池本文整理汇总了业界常用的多模态中文数据集&#xff0c;提供了每个数据集的简介、官网、下载地址、Github代码等信息&#xff0c;方便算法研究人员学习…

100.qt qml-MultiPointTouchArea多点触摸缩放拖拽

介绍 MultiPointTouchArea是一个不可见的项目,用于跟踪多个触摸点,它的父类是Item,所以我们可以通过enabled来设置触摸是启用还是禁用。 它提供了一个mouseEnabled属性,该属性默认为true,也就是说也会处理鼠标事件,鼠标事件其实就是当个触摸点,如果设置为false,则只会处理多…

使用Python实现集成学习算法:Bagging与Boosting

集成学习是一种机器学习方法&#xff0c;它通过结合多个弱学习器来构建一个强大的模型&#xff0c;从而提高预测的准确性和稳定性。在本文中&#xff0c;我们将介绍两种常见的集成学习算法&#xff1a;Bagging&#xff08;自举聚合&#xff09;和Boosting&#xff08;提升法&am…

克隆两台虚拟机作为子节点(三)

选中一台要克隆的虚拟机&#xff0c;在菜单栏 虚拟机下 选择 管理-->克隆 选择虚拟机中的当前状态 继续-->创建完整克隆 根据需要进行命名&#xff0c;最好修改安装的路径。