HTML DOM setInterval和clearInterval方法案例详解

在javascript编程中，setInterval可以帮助我们实现一个定时器的功能，能够让我们定时执行某一项操作，如果不需要继续执行了，我们只需要调用clearInterval函数，清除定时器即可。

这里要重点说的是清除定时器的时机，我们一般是需要进行一个条件判断，比如 var count=5,我们定时执行count--操作，当count==0的时候，清除定时器，一般情况下，我们的代码是这样写的。

这段代码，逻辑上没有什么问题， 就是当count==0的时候，我们清除定时器。我们运行这段代码，看看效果：

我们惊奇的发现，并不是我们想象中的那样，setInterval这个函数，并不会在清理定时器之后，就退出，后续的操作还是会执行。为了让清除定时器之后的代码不再执行，我们可以直接进行return返回。

 

这种办法是可行的，但是也是没有太大的必要，我们可以进行简单的语句顺序调换，把条件判断放到最后，我们的代码就成了这样。

同样，可以达到我们预期的效果：

setInterval函数执行，会返回一个定时参数，这里我们叫interval，当我们需要清除定时器的时候，就直接传入这个参数，如clearInterval(interval)。 

到此这篇关于HTML DOM setInterval和clearInterval方法案例详解的文章就介绍到这了,更多相关HTML DOM setInterval和clearInterval方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • php将word转换为html格式代码分析

    PHP将上传word文件,转化为Html格式,(多种转换方式) 1.通过PHPOffice 1: composer require phpoffice/phpword /* 通过composer安装 PHPOffice 需要科学上网 或者用中国镜像:https://www.phpcomposer.com/ */ 2: 安装成功可看到 vendor文件夹 3: 使用方法 : require 'vendor/autoload.php'; $phpWord = \PhpOffice\PhpWord\I

  • html form表单基础入门案例讲解

    html form表单基础入门案例讲解

    目录 一,表格标签 –1,概述 –2,总结 二,表单标签 –1,测试 –2,总结 –3,form提交数据 三,form表单的练习 四,CSS -1,概述 -2,语法 -3,入门案例 五,选择器 总结 一,表格标签 向网页中加入表格 –1,概述 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试 表格标签</title> </head&g

  • 如何利用pandas将Excel转为html格式

    如何利用pandas将Excel转为html格式

    前言 大家谈及用Pandas导出数据,应该就会想到to.xxx系列的函数. 这其中呢,比较常用的就是pd.to_csv()和pd.to_excel().但其实还可以将其导成Html网页格式,这里用到的函数就是pd.to_html()! 读取Excel 今天我们要实现Excel转为html格式,首先需要用读取Excel中的表格数据. import pandas as pd data = pd.read_excel('测试.xlsx') 查看数据 data.head() 下面我们来学习把DataFr

  • 教你如何从 html 实现一个 react

    教你如何从 html 实现一个 react

    什么是 React React是一个简单的javascript UI库,用于构建高效.快速的用户界面.它是一个轻量级库,因此很受欢迎.它遵循组件设计模式.声明式编程范式和函数式编程概念,以使前端应用程序更高效.它使用虚拟DOM来有效地操作DOM.它遵循从高阶组件到低阶组件的单向数据流. 前言

  • scrapy+flask+html打造搜索引擎的示例代码

    scrapy+flask+html打造搜索引擎的示例代码

    目录 1.预备知识 2.抓取CSDN数据接口 2.1 查看CSDN搜索引擎主页 2.2测试CSDN搜索引擎的功能 2.3查看更多相关文章的信息 2.4抓取ajax异步请求数据 2.5 分析url地址 3. 使用scrapy爬取CSDN数据接口 3.1 start_requests 3.2使用parse函数提取数据 3.3保存成CSV文件 3.4 运行结果 4. 效果展示 4.1 flask后端展示 4.2 效果展示 1.预备知识 python语言,scrapy爬虫基础,json模块,flask后

  • HTML DOM setInterval和clearInterval方法案例详解

    HTML DOM setInterval和clearInterval方法案例详解

    在javascript编程中,setInterval可以帮助我们实现一个定时器的功能,能够让我们定时执行某一项操作,如果不需要继续执行了,我们只需要调用clearInterval函数,清除定时器即可. 这里要重点说的是清除定时器的时机,我们一般是需要进行一个条件判断,比如 var count=5,我们定时执行count--操作,当count==0的时候,清除定时器,一般情况下,我们的代码是这样写的. 这段代码,逻辑上没有什么问题, 就是当count==0的时候,我们清除定时器.我们运行这段代码,

  • spring security在分布式项目下的配置方法(案例详解)

    分布式项目和传统项目的区别就是,分布式项目有多个服务,每一个服务仅仅只实现一套系统中一个或几个功能,所有的服务组合在一起才能实现系统的完整功能.这会产生一个问题,多个服务之间session不能共享,你在其中一个服务中登录了,登录信息保存在这个服务的session中,别的服务不知道啊,所以你访问别的服务还得在重新登录一次,对用户十分不友好.为了解决这个问题,于是就产生了单点登录: **jwt单点登录:**就是用户在登录服务登录成功后,登录服务会产生向前端响应一个token(令牌),以后用户再访问系

  • HTML form表单提交方法案例详解

    form表单提交方式总结一下: 一.利用submit按钮实现提交,当点击submit按钮时,触发onclick事件,由JavaScript里函数判断输入内容是否为空,如果为空,返回false, 不提交,如果不为空,提交到由action指定的地址. <script type="text/javascript"> function check(form) { if(form.userId.value=='') { alert("请输入用户帐号!"); for

  • Android ExpandableListView使用方法案例详解

    Android ExpandableListView使用方法案例详解

    目录 一.前言 二.实现的功能 三.具体代码 1.主xml代码 2.父布局xml代码 3.子布局xml代码 4.主activity代码 5.adapter代码 一.前言   "好记性不如烂笔头",再次验证了这句话是真的很有道理啊,一个月前看了一下ExpandableListView的使用,今天再看居然忘了这个是干啥的了,今天就详细讲解一下ExpandableListView的使用方法,感觉对于二级条目显示功能都可以实现. 二.实现的功能 1.可实现二级列表条目显示功能,具体包括可自定义

  • C++ random_shuffle()方法案例详解

    假设你需要指定范围内的随机数,传统的方法是使用ANSI C的函数random(),然后格式化结果以便结果是落在指定的范围内.但是,使用这个方法至少有两个缺点. 首先,做格式化时,结果常常是扭曲的,所以得不到正确的随机数(如某些数的出现频率要高于其它数) 其次,random()只支持整型数:不能用它来产生随机字符,浮点数,字符串或数据库中的记录. 对于以上的两个问题,C++中提供了更好的解决方法,那就是random_shuffle()算法.不要着急,下面我就会告诉你如何用这种算法来产生不同类型的随

  • sql ROW_NUMBER()与OVER()方法案例详解

    sql ROW_NUMBER()与OVER()方法案例详解

    语法格式:row_number() over(partition by 分组列 order by 排序列 desc) row_number() over()分组排序功能: 在使用 row_number() over()函数时候,over()里头的分组以及排序的执行晚于 where .group by.  order by 的执行. 例一: 表数据: create table TEST_ROW_NUMBER_OVER( id varchar(10) not null, name varchar(1

  • C# DateTime.Compare()方法案例详解

    C#中的DateTime.Compare()方法用于比较两个DateTime实例.它返回一个整数值, <0-如果date1早于date2 0-如果date1与date2相同 > 0-如果date1晚于date2 语法 以下是语法- public static int Compare (DateTime d1, DateTime d2); 上面的d1和d2是要比较的两个日期. 示例 现在让我们看一个实现DateTime.Compare()方法的示例- using System; public c

  • C# InitializeComponent()方法案例详解

    在每一个窗体生成的时候,都会针对于当前的窗体定义InitializeComponent()方法,该方法实际上是由系统生成的对于窗体界面的定义方法. //位于.cs文件之中的InitializeComponent()方法 public Form011() { InitializeComponent(); } 在每一个Form文件建立后,都会同时产生程序代码文件.CS文件,以及与之相匹配的.Designer.CS文件,业务逻辑以及事件方法等被编写在.CS文件之中,而界面设计规则被封装在.Design

  • C# DateTime日期比较方法案例详解

    C# DateTime日期比较方法案例详解

    之前做到日期时间的时候,有许多格式问题和日期时间比较问题,以及相关条件约束,因为不熟悉这个,浪费许多时间,查找相关资料,记录,以作备用. 1. Convert.ToDateTime       使用的是Windows控制模版中对日期格式的定义,可以使用Convert.ToDateTime("12-02-02").ToString("YYYY-MM-DD "); 或者Convert.ToDateTime("12-02-02").ToString(&

  • Java Collections.shuffle()方法案例详解

    Java.util.Collections类下有一个静态的shuffle()方法,如下: 1)static void shuffle(List<?> list)  使用默认随机源对列表进行置换,所有置换发生的可能性都是大致相等的. 2)static void shuffle(List<?> list, Random rand) 使用指定的随机源对指定列表进行置换,所有置换发生的可能性都是大致相等的,假定随机源是公平的. 通俗一点的说,就像洗牌一样,随机打乱原来的顺序. 注意:如果给

随机推荐