JS设置定时器和清除定时器

JS设置定时器和清除定时器JS 设置定时器和清除定时器 nbsp nbsp 在做项目中难免会碰到需要实时刷新 动画依次出现等等需求 这时候就需要定时器登上我们的代码舞台了 所以今天我们就先来了解一下 JS 定时器的设置和清除吧 一 启用定时器 nbsp nbsp window 对象提供了两个方法来实现定时器的效果 分别是 window setTimeout 和 window setInterval 其中前者可以使一段代码在指定时间后运行 而后者则可以使一

JS设置定时器和清除定时器

   在做项目中难免会碰到需要实时刷新,动画依次出现等等需求,这时候就需要定时器登上我们的代码舞台了,所以今天我们就先来了解一下JS定时器的设置和清除吧。

  • 一、启用定时器

   window对象提供了两个方法来实现定时器的效果,分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行;而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下:

   window.setTimeout(code,millisec);

   window.setInterval(code,millisec);

   其中,code可以是用引号括起来的一段代码,也可以是一个函数名,到了指定的时间,系统便会自动调用该函数,当使用函数名作为调用句柄时,不能带有任何参数;而使用字符串时,则可以在其中写入要传递的参数。两个方法中的第二个参数是millisec,表示延时或者重复执行的毫秒数。

具体写法如下

  • 函数名,不带参数

setTimeout (test,1000);           //1秒后执行

字符串,可以执行的代码

setTimeout (‘test()’,1000);       //1秒后执行

  • 匿名函数

setTimeout (function(){},1000);   //1秒后执行

注:setInterval的用法与setTimeout一样

  • 调用函数,带参数

setTimeout (‘test(参数)’,1000);      //1秒后执行

注:如果不小心写成了setTimeout (test(参数),1000);test方法就会立即执行哦。

DEMO代码:

JS设置定时器和清除定时器

 

执行结果:

JS设置定时器和清除定时器

 

二、清除定时器

   由于定时器在调用时,都会返回一个整形的数字,该数字代表定时器的序号,即第多少个定时器,所以定时器的清除要借助于这个返回的数字。

   定时器清除的方法:clearTimeout(obj)和clearInterval(obj)。

   要清除定时器,就必须在用定时器的时候,定义一个变量来记录定时器的返回值。如下:

//setTimeout 1000ms后执行1次 var test1 = setTimeout(function(){ //your codes },1000); //setInterval 每隔1000ms执行一次 var test2 = setInterval(function(){ //your codes },1000) //清除Timeout的定时器,传入变量名(创建Timeout定时器时定义的变量名) clearTimeout(test1); //清除Interval的定时器,传入变量名(创建Interval定时器时定义的变量名) clearInterval(test2); 

 

   注:有时候在写的时候,还会习惯将清空的定时器的变量置空,这样写既可以释放内存,也可以便于后边代码的判断。

原文链接:https://www.h5anli.com/articles/201705/setimeone.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/203120.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月19日 下午10:32
下一篇 2026年3月19日 下午10:32


相关推荐

  • cloudsim仿真平台扩展的例子_云平台虚拟化技术

    cloudsim仿真平台扩展的例子_云平台虚拟化技术http://1.johnhome.sinaapp.com/?p=257幻灯片1云计算仿真框架CloudSim介绍jiangzw#ihep.ac.cn(以下为本人某次报告做的调研的PPT及其它一些实践记录,为保证清晰度,一些插入的图片较大,可在新标签页中打开)本文基于 署名3.0中国大陆 许可协议发布,未经本人许可不得转载

    2022年10月10日
    4
  • matlab imfill函数「建议收藏」

    matlab imfill函数「建议收藏」Matlab函数imfill简介函数功能:该函数用于填充图像区域和“空洞”。语法格式:BW2=imfill(BW)这种格式将一张二值图像显示在屏幕上,允许用户使用鼠标在图像上点几个点,这几个点围成的区域即要填充的区域。要以这种交互方式操作,BW必须是一个二维的图像。用户可以通过按Backspace键或者Delete键来取消之前选择的区域;通过shift+鼠标左键单击或者

    2025年11月5日
    4
  • 清关报关知识详解_海关清关中是什么意思

    清关报关知识详解_海关清关中是什么意思  加工中心清关代理流程报关知识科普    进口泰国二手加工中心清关代理流程报关知识科普    机电企业产品的定义:机电技术产品是指使用进行机械、电器、电子信息设备所生产的各类农具机械、电器、电子系统性能的生产管理设备和生活用机具。一般包括机械设备、电气设备、运输工具、电子产品、电子产品、仪器仪表、金属产品及其零部件。    那么什么是二手设备?    (一)已经可以使用(不含使用前测试、调试的设备),仍具备基本信息功能和一定能够使用时间价值的;    (二)未经使用,但是超过质量保

    2026年2月8日
    4
  • 孤单,能力守得住繁华

    孤单,能力守得住繁华

    2022年1月2日
    45
  • 打造新圣魔大战简体中文终极版(H补丁、不能安装、运行问题)

    打造新圣魔大战简体中文终极版(H补丁、不能安装、运行问题)最近玩通了新圣魔大战 感觉很好玩 我玩的这个是迅雷搜索找到的 152MB 的新圣魔大战中文版 新圣魔大战 CastleFantis 全记录存档注意 别人的存档不能直接用 解决方法

    2026年3月18日
    2
  • 对象转map(object转map)

    对象转map(object转map)importjava.lang.reflect.Field;importjava.util.LinkedHashMap;importjava.util.Map;publicclassObjectToMap{//对象转MappublicstaticMap<String,Object>getObjectToMap(Objectobj)t…

    2022年5月16日
    57

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号