首页 > 其他分享 >setInterval和setTimeout的区别

setInterval和setTimeout的区别

时间:2023-09-12 12:03:06浏览次数:43  
标签:setTimeout 函数 区别 setInterval 毫秒 执行 表达式

在制作网页动态效果时,一定会遇到某些需求,要求某段程序等待多时时间后再开始执行,就像在我们的生活中一样,待会儿再开始做一件事。在JavaScript中主要通过定时器实现此类需求,本文将对定时器做一个概括,正对setTimeout()做一个详细用法总结。

一.setInterval与setTimeout的区别

setInterval
setInterval()方法可按照指定的周期来调用函数或者计算表达式(以毫秒为单位)
语法:
setInterval(函数表达式,毫秒数);
setInterval()会不停的调用函数,直到clearInterval()被调用或者窗口被关闭,由 setInterval()返回的ID值可用作clearInterval()方法的参数。
setTimeout
setTimeout()方法用于在指定毫秒数后再调用函数或者计算表达式(以毫秒为单位)
语法:
setTimeout(函数表达式,毫秒数);
setTimeout()只执行函数一次,如果需要多次调用可以使用setInterval(),或者在函数体内再次调用setTimeout()
区别
  通过以上分析可以看出,setTimeout与setInterval的主要区别是:
  setTimeout()方法只运行一次,也就是说当达到设定的时间后就出发运行指定的代码,运行完后就结束了,如果还想再次执行同样的函数,可以在函数体内再次调用setTimeout(),可以达到循环调用的效果。
  setInterval()是循环执行的,即每达到指定的时间间隔就执行相应的函数或者表达式,是真正的定时器。

二.setTimeout()的用法

先写个最简单的demo,如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
setTimeout("alert('hello')",2000);
</script>
</head>
<body>
</body>
</html>

页面会在停留2秒之后弹出对话框,注意setTimeout不会自动重复执行!
当然,setTimeout也可以执行function,还可以不断重复执行!
你可以看到h1中的文本数字在一秒一秒地递增!
更加灵活的是,你还可以指定重复执行的次数,如下:
if判断中的数字,是用来限制重复执行次数的条件。

三.clearTimeout()

要使用clearTimeout(),需要我们设定setTimeout()时, 给予这setTimeout()一个名称, 这名称就是timeoutID ,我们叫停时,就是用这 timeoutID 来叫停

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script>
var timeId= setTimeout("alert('hello')",2000);
clearTimeout(timeId);
</script>
</head>
<body>
</body>
</html>

原计划1秒后弹出的警示框,被自然叫停了。

标签:setTimeout,函数,区别,setInterval,毫秒,执行,表达式
From: https://blog.51cto.com/u_16207938/7444155

相关文章

  • JavaScript中apply, call和bind的区别
    首先要知道,JavaScript中apply,call和bind的作用基本都是一样的,就是用来改变函数执行时的上下文,或者说改变函数的this对象指向在详细了解它们的区别之前,我们先来看一个例子varname="lucky";constobj={name:"martin",say:function()......
  • 云服务器与内网穿透有什么区别?哪个好用?
    云服务器与内网穿透有什么区别,哪个好用?如何在自己公网IP云主机上部署搭建P2P穿透?这里给大家汇总介绍一下,供大家共同学习了解。云服务器的一些特点:需要数据上云场景时,通常可以选择使用云服务器。1.数据上云。比如网站服务的,网站程序文件和数据库等都是部署在云端,本地不存在数据,或定......
  • Spring中@Autowired、@Qualifier、@Resource、@Primary、@Inject注解的区别
       @Primary注解在Spring框架中用于解决自动装配冲突。当存在多个类型相同的Bean时,如果没有使用@Qualifier注解或者@Qualifier注解没有指定Bean的名称,Spring框架将无法判断应该使用哪个Bean进行注入。此时,可以使用@Primary注解来指定默认的Bean。被@Primary注解的Bean会优......
  • usb2.0和usb3.0的区别
     001、区别1usb2.0通常黑色或者白色;usb3.0通常为蓝色或者橙色 002、区别2usb2.0通常4针脚;usb3.0通常9针脚 003、区别3usb2.0速度慢;usb3.0速度快,且兼容usb2.0 004、区别4usb2.0供电弱;usb3.0供电强。......
  • torch.tensor与torch.Tensor区别
    在pytorch中torch.tensor与torch.Tensor都可以生成新的张量torch.Tensor是python类,会调用自己的构造函数,是默认张量类型torch.FloatTensor的别名,所以数据传入时会使用全局默认类型(FloatTensor)而torch.tensor会根据输入的数据进行推断,根据原始数据类型生成相应的torch.LongTensor......
  • 应力和体积力的区别(切应力、黏性力、正应力)
    参考1:https://www.bilibili.com/read/cv25439944/参考2:https://zhuanlan.zhihu.com/p/554300210?utm_id=0流体受到的力按照作用的类型可分为两类:体积力——场力,表面力——接触力。体积力体积力也称为质量力,是指作用在所有流体元上的非接触力,例如重力、惯性力、电磁力等。体......
  • const char *ptr和char const *ptr以及char* const ptr的区别
    constchar*ptr和charconst*ptr =>这里这么理解,这个表示的是*ptr,也就是指针指向的值,而修饰这个指针指向的值(*ptr)的是constchar或者charconst,表示两个意思:const=>表示是个常量,也就是说*ptr这个指针指向的值是个常量char=>表示字符类型,也就是说这个指针指......
  • JSON.stringify和JSON.parse的用法和区别
    JSON.stringify()和JSON.parse()是JavaScript中用于处理JSON数据的方法,它们的用法和区别如下:####一:JSON.stringify()方法将JavaScript对象或值转换为JSON字符串。它接受一个参数,即要转换的对象或值。示例:varobj={name:'John',age:25};varjsonString=JSON.......
  • 多线程中的sleep和wait有什么区别
    多线程中的sleep和wait有什么区别在多线程中,sleep()和wait()是两种不同的方法,有以下区别:调用位置:sleep()是Thread类的静态方法,可以在任何地方调用;而wait()是Object类的方法,只能在同步代码块或同步方法中调用。锁的释放:sleep()方法不会释放锁,线程持有锁的状态不变;而wait()方......
  • python系列之:深入理解函数、方法以及函数和方法的区别
    python系列之:python系列之:深入理解函数、方法以及函数和方法的区别一、函数二、函数参数1.必需参数2.关键字参数3.默认参数4.不定长参数三、函数和方法的区别一、函数Python定义函数使用def关键字,一般格式如下:def函数名(参数列表):函数体函数实际例子如下所示:defmax(a,......