JavaScript中setTimeout()和setInterval()的使用以及区别

2024-05-11 04:18

本文主要是介绍JavaScript中setTimeout()和setInterval()的使用以及区别,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

       今天刚好在看setTimeout()的一个案例,在案例的解析中提到了setTimeout()和setInterval()的使用区别,但是比较理论,所以

决定自己也总结一下,写写例子帮助理解一下。

       首先是说说这两个方法的具体时如何使用的。

1、setTimeout()方法

      这个方法所有浏览器都支持,setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来

设定一个时间, 时间到了, 就会执行一个指定的 method。

      定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。  

      语法: setTimeout(code,millisec)  

      参数: code (必需):要调用的函数后要执行的 JavaScript 代码串。millisec(必需):在执行代码前需等待的毫秒数。   

      提示: setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

      看完了基本的语法,接下来我写一个很简单的例子说明这个的使用方法。

代码如下:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
</head>
<body><h1> setTimeout()使用 </h1><p> 请等待三秒!</p>
</body>
<script>setTimeout("alert('终于等到你了!')", 3000 )
</script>
</html>
      当我们打开网页3秒时,就会弹出一个框。但是,只会弹出一次,因为 setTimeout()不会自动重复执行,是在载入后的延迟指定

时间去执行一次表达式。

     当然,我们也可以让setTimeout()执行函数,而且可以重复执行多次,而不是一次。

代码如下:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><script>var x = 0;function countSecond(){x = x+1;document.haorooms.haoroomsinput.value = x;setTimeout("countSecond()", 1000)}</script>
</head>
<html>
<body><form name="haorooms"><input type="text" name="haoroomsinput" value="0" size=4 >
</form><script>countSecond();
</script></body>
</html>
       实现的方法就是让函数自身反复调用。

2、setInterval()方法

     setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 

clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

     语法: setInterval(code,millisec[,"lang"])

     参数: code 必需。要调用的函数或要执行的代码串。millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

     返回值: 一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

     如果我们想要每隔3秒就弹出一个框要如何实现呢?

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script>function test(){this.name = "setInternal";this.waitMes = function(){var that = this;setInterval(function(){alert(that.name);},3000);}}var te = new test();te.waitMes();
</script>
</html>
       setInterval() 从载入后,每隔指定的时间就执行一次表达式。

3、区别

     通过上面可以看出,setTimeout和setinterval的最主要区别是:

    1)setTimeout只运行一次,也就是说设定的时间到后就触发运行指定代码,运行完后即结束。如果运行的代码中再次运行同样

的setTimeout命令,则可循环运行。(即 要循环运行,需函数自身再次调用 setTimeout());而 setinterval是循环运行的,即每

到设定时间间隔就触发指定代码。这是真正的定时器。

    2)setinterval使用简单,而setTimeout则比较灵活,可以随时退出循环,而且可以设置为按不固定的时间间隔来运行,比如第

一次1秒,第二次2秒,第三次3秒。



这篇关于JavaScript中setTimeout()和setInterval()的使用以及区别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

JAVA保证HashMap线程安全的几种方式

《JAVA保证HashMap线程安全的几种方式》HashMap是线程不安全的,这意味着如果多个线程并发地访问和修改同一个HashMap实例,可能会导致数据不一致和其他线程安全问题,本文主要介绍了JAV... 目录1. 使用 Collections.synchronizedMap2. 使用 Concurren

Java Response返回值的最佳处理方案

《JavaResponse返回值的最佳处理方案》在开发Web应用程序时,我们经常需要通过HTTP请求从服务器获取响应数据,这些数据可以是JSON、XML、甚至是文件,本篇文章将详细解析Java中处理... 目录摘要概述核心问题:关键技术点:源码解析示例 1:使用HttpURLConnection获取Resp

C 语言中enum枚举的定义和使用小结

《C语言中enum枚举的定义和使用小结》在C语言里,enum(枚举)是一种用户自定义的数据类型,它能够让你创建一组具名的整数常量,下面我会从定义、使用、特性等方面详细介绍enum,感兴趣的朋友一起看... 目录1、引言2、基本定义3、定义枚举变量4、自定义枚举常量的值5、枚举与switch语句结合使用6、枚

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

Java中Switch Case多个条件处理方法举例

《Java中SwitchCase多个条件处理方法举例》Java中switch语句用于根据变量值执行不同代码块,适用于多个条件的处理,:本文主要介绍Java中SwitchCase多个条件处理的相... 目录前言基本语法处理多个条件示例1:合并相同代码的多个case示例2:通过字符串合并多个case进阶用法使用

Java中的Lambda表达式及其应用小结

《Java中的Lambda表达式及其应用小结》Java中的Lambda表达式是一项极具创新性的特性,它使得Java代码更加简洁和高效,尤其是在集合操作和并行处理方面,:本文主要介绍Java中的La... 目录前言1. 什么是Lambda表达式?2. Lambda表达式的基本语法例子1:最简单的Lambda表

Java中Scanner的用法示例小结

《Java中Scanner的用法示例小结》有时候我们在编写代码的时候可能会使用输入和输出,那Java也有自己的输入和输出,今天我们来探究一下,对JavaScanner用法相关知识感兴趣的朋友一起看看吧... 目录前言一 输出二 输入Scanner的使用多组输入三 综合练习:猜数字游戏猜数字前言有时候我们在

Spring Security+JWT如何实现前后端分离权限控制

《SpringSecurity+JWT如何实现前后端分离权限控制》本篇将手把手教你用SpringSecurity+JWT搭建一套完整的登录认证与权限控制体系,具有很好的参考价值,希望对大家... 目录Spring Security+JWT实现前后端分离权限控制实战一、为什么要用 JWT?二、JWT 基本结构