JavaScript Timing 事件(定时器)

2023-11-23 00:48

本文主要是介绍JavaScript Timing 事件(定时器),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

JavaScript Timing 事件

    • 1、setTimeout() 方法
    • setTimeout() 方法如何停止执行?
    • 2、setInterval() 方法
    • setInterval() 方法如何停止执行?

JavaScript 可以在时间间隔内执行。

这就是所谓的定时事件( Timing Events)。

定时器方法如下

方法说明
setTimeout()在指定的毫秒数后调用函数或执行一段代码
setInterval()按照指定的周期(以毫秒计)来调用函数或执行一段代码
clearTimeout()取消由setTimeout()方法设置的定时器
clearInterval()取消由setInterval()设置的定时器

通过 JavaScript 使用的有两个关键的方法:

1、setTimeout() 方法

window.setTimeout(function, milliseconds);

在等待指定的毫秒数后执行函数。

window.setTimeout() 方法可以不带 window 前缀来编写。

第一个参数是要执行的函数

第二个参数指示执行之前的毫秒数

setTimeout() 方法如何停止执行?

clearTimeout() 方法停止执行 setTimeout() 中规定的函数。

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不带 window 前缀来写。

clearTimeout() 使用从 setTimeout() 返回的变量:

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

2、setInterval() 方法

setInterval() 方法在每个给定的时间间隔重复给定的函数。

window.setInterval(function, milliseconds);

等同于 setTimeout(),但持续重复执行该函数。
window.setInterval() 方法可以不带 window 前缀来写。

第一个参数是要执行的函数

第二个参数每个执行之间的时间间隔的长度。

setInterval() 方法如何停止执行?

clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。

window.clearInterval(timerVariable)

window.clearInterval() 方法可以不带 window 前缀来写。

clearInterval() 方法使用从 setInterval() 返回的变量:

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

setTimeout() 和 setInterval() 都属于 HTML DOM Window 对象的方法。

【案例】3s内只能发送一次短信

实现思路:

1、在页面中放一个文本框和一个“发送”按钮。

2、在文本框中输入手机号码,然后单击“发送”按钮,就可以发送短信。

3、在按钮单击之后,按钮上的文字会变为“还剩x秒再次单击”。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div><label for="">手机号码:<input type="text"><button id="btn">发送</button></label></div><script>//创建定时器var btn = document.querySelector('#btn');var time;btn.addEventListener('click',function(){time = 3;btn.disabled = true;var timer = setInterval(function(){if(time==0){//清除定时器clearInterval(timer);//让按钮可用btn.disabled = false;//让按钮上的文字变为发送btn.innerHTML = '发送';}else{btn.innerHTML = '还剩下'+time+'秒';time--;}},1000)})</script>
</body>
</html>

这篇关于JavaScript Timing 事件(定时器)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/414115

相关文章

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

Java中读取YAML文件配置信息常见问题及解决方法

《Java中读取YAML文件配置信息常见问题及解决方法》:本文主要介绍Java中读取YAML文件配置信息常见问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录1 使用Spring Boot的@ConfigurationProperties2. 使用@Valu

创建Java keystore文件的完整指南及详细步骤

《创建Javakeystore文件的完整指南及详细步骤》本文详解Java中keystore的创建与配置,涵盖私钥管理、自签名与CA证书生成、SSL/TLS应用,强调安全存储及验证机制,确保通信加密和... 目录1. 秘密键(私钥)的理解与管理私钥的定义与重要性私钥的管理策略私钥的生成与存储2. 证书的创建与

浅析Spring如何控制Bean的加载顺序

《浅析Spring如何控制Bean的加载顺序》在大多数情况下,我们不需要手动控制Bean的加载顺序,因为Spring的IoC容器足够智能,但在某些特殊场景下,这种隐式的依赖关系可能不存在,下面我们就来... 目录核心原则:依赖驱动加载手动控制 Bean 加载顺序的方法方法 1:使用@DependsOn(最直

SpringBoot中如何使用Assert进行断言校验

《SpringBoot中如何使用Assert进行断言校验》Java提供了内置的assert机制,而Spring框架也提供了更强大的Assert工具类来帮助开发者进行参数校验和状态检查,下... 目录前言一、Java 原生assert简介1.1 使用方式1.2 示例代码1.3 优缺点分析二、Spring Fr

java使用protobuf-maven-plugin的插件编译proto文件详解

《java使用protobuf-maven-plugin的插件编译proto文件详解》:本文主要介绍java使用protobuf-maven-plugin的插件编译proto文件,具有很好的参考价... 目录protobuf文件作为数据传输和存储的协议主要介绍在Java使用maven编译proto文件的插件

Java中的数组与集合基本用法详解

《Java中的数组与集合基本用法详解》本文介绍了Java数组和集合框架的基础知识,数组部分涵盖了一维、二维及多维数组的声明、初始化、访问与遍历方法,以及Arrays类的常用操作,对Java数组与集合相... 目录一、Java数组基础1.1 数组结构概述1.2 一维数组1.2.1 声明与初始化1.2.2 访问

Javaee多线程之进程和线程之间的区别和联系(最新整理)

《Javaee多线程之进程和线程之间的区别和联系(最新整理)》进程是资源分配单位,线程是调度执行单位,共享资源更高效,创建线程五种方式:继承Thread、Runnable接口、匿名类、lambda,r... 目录进程和线程进程线程进程和线程的区别创建线程的五种写法继承Thread,重写run实现Runnab

Java 方法重载Overload常见误区及注意事项

《Java方法重载Overload常见误区及注意事项》Java方法重载允许同一类中同名方法通过参数类型、数量、顺序差异实现功能扩展,提升代码灵活性,核心条件为参数列表不同,不涉及返回类型、访问修饰符... 目录Java 方法重载(Overload)详解一、方法重载的核心条件二、构成方法重载的具体情况三、不构

Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

《Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式》本文详细介绍如何使用Java通过JDBC连接MySQL数据库,包括下载驱动、配置Eclipse环境、检测数据库连接等关键步骤,... 目录一、下载驱动包二、放jar包三、检测数据库连接JavaJava 如何使用 JDBC 连接 mys