JavaScript定时器setTimeout()和setInterval()详解

发布时间 - 2026-01-11 02:51:05    点击率:

本文实例为大家分享了JavaScript定时器的具体方法,供大家参考,具体内容如下

1、 超时调用setTimeout()

顾名思义,超时调用的意思就是在一段实际之后调用(在执行代码之前要等待多少毫秒)

setTimeout()他可以接收两个参数:

1.要执行的代码或函数

2.毫秒(在执行代码之前要等待多少毫秒)

function test(){
 alert("孙悟空");
}
setTimeout(test,2000);  //2s后弹出 “孙悟空”    

clearTimeout()

clearTimeout,表示清除定时器,可以用它取消未执行的调用

var timmer=function test(){
 alert("孙悟空");
}
setTimeout(test,2000); //2s后弹出 “孙悟空”  
clearTimeout(timmer); //取消定时器,因为前者在两秒后调用,调用之前已经取消相当于什么也没发生

2、间歇调用setInterval()

间歇调用就是指定的时间内不断地重复执行代码,大白话就是“一会调用一次,一会调用一次”

setInterval()它也接收两个参数,与前者相同:

1.要执行的代码或函数

2.毫秒(在执行代码之前要等待多少毫秒)

function test(){
 alert("孙悟空");
}
setInterval(test,2000);  //每隔2s后弹出一次 “孙悟空”  

clearInterval()

clearInterval()与clearTimeout()使用方法相同,也是清除定时器方法

var num=0;
var max=10;
function test(){
 num++;
 if (num==max){
  clearInterval(timer); //累加到10时清除清定时器
  alert("这里有"+num+"个孙悟空"); //这里有10个孙悟空
 }
}
timer=setInterval(test,500); 

 在上面的例子中,变量num每隔0.5s递增一次,当递增到最大值时就会清除先前设置的定时器(间歇调用)。

这个模式也可以用超时调用来实现

var num=0;
var max=10;
function test(){
 num++;
 if (num<max){
  setTimeout(test,500);
 }else{
  alert("这里有"+num+"个孙悟空")
 }
}
setTimeout(test,500);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


# js  # 定时器  # Js中setTimeout()和setInterval() 何时被调用执行的用法  # 精解window.setTimeout()&window.setInterval()使用方式  # setInterval()和setTimeout()的用法和区别示例介绍  # setTimeout()与setInterval()方法区别介绍  # JavaScript setInterval()与setTimeout()计时器  # JavaScript中定时器setTimeout()和setInterval()的用法  # JavaScript中setInterval()和setTimeout()的用法及区别  # 弹出  # 每隔  # 可以用  # 时间内  # 时就  # 顾名思义  # 在上面  # 大家分享  # 它也  # 来实现  # 用它  # 具体内容  # 什么也没  # 大家多多  # 先前  # 就是在  # pre  # function  # class 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: Laravel如何使用Contracts(契约)进行编程_Laravel契约接口与依赖反转  如何利用DOS批处理实现定时关机操作详解  Laravel如何保护应用免受CSRF攻击?(原理和示例)  成都网站制作公司哪家好,四川省职工服务网是做什么用?  Java类加载基本过程详细介绍  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  Laravel如何将应用部署到生产服务器_Laravel生产环境部署流程  Windows10如何更改计算机工作组_Win10系统属性修改Workgroup  Laravel如何实现多表关联模型定义_Laravel多对多关系及中间表数据存取【方法】  nodejs redis 发布订阅机制封装实现方法及实例代码  Laravel如何集成Inertia.js与Vue/React?(安装配置)  韩国网站服务器搭建指南:VPS选购、域名解析与DNS配置推荐  Zeus浏览器网页版官网入口 宙斯浏览器官网在线通道  如何在万网主机上快速搭建网站?  佛山企业网站制作公司有哪些,沟通100网上服务官网?  宙斯浏览器视频悬浮窗怎么开启 边看视频边操作其他应用教程  如何快速搭建FTP站点实现文件共享?  教你用AI将一段旋律扩展成一首完整的曲子  Python进程池调度策略_任务分发说明【指导】  如何在阿里云虚拟机上搭建网站?步骤解析与避坑指南  如何在景安服务器上快速搭建个人网站?  uc浏览器二维码扫描入口_uc浏览器扫码功能使用地址  如何用PHP快速搭建高效网站?分步指南  手机网站制作与建设方案,手机网站如何建设?  如何快速上传自定义模板至建站之星?  阿里云高弹*务器配置方案|支持分布式架构与多节点部署  如何注册花生壳免费域名并搭建个人网站?  Laravel怎么设置路由分组Prefix_Laravel多级路由嵌套与命名空间隔离【步骤】  Laravel storage目录权限问题_Laravel文件写入权限设置  如何在云指建站中生成FTP站点?  Laravel中间件起什么作用_Laravel Middleware请求生命周期与自定义详解  如何快速启动建站代理加盟业务?  标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的,背景音乐、音效等?  长沙企业网站制作哪家好,长沙水业集团官方网站?  Laravel如何为API编写文档_Laravel API文档生成与维护方法  高性价比服务器租赁——企业级配置与24小时运维服务  如何用免费手机建站系统零基础打造专业网站?  如何将凡科建站内容保存为本地文件?  Laravel如何优雅地处理服务层_在Laravel中使用Service层和Repository层  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样?  常州企业网站制作公司,全国继续教育网怎么登录?  5种Android数据存储方式汇总  如何选择PHP开源工具快速搭建网站?  Laravel如何发送系统通知?(Notification渠道示例)  原生JS获取元素集合的子元素宽度实例  如何在阿里云购买域名并搭建网站?  成都品牌网站制作公司,成都营业执照年报网上怎么办理?  Laravel N+1查询问题如何解决_Eloquent预加载(Eager Loading)优化数据库查询  Laravel PHP版本要求一览_Laravel各版本环境要求对照  制作旅游网站html,怎样注册旅游网站?