js定时器

JavaScript定时器

2022-02-28 18:09:46

JavaScript提供定时器（timer）的功能，可以延期执行或重复执行函数或代码段。

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

1.setTimeout()

在指定的毫秒数后调用函数或执行一段代码。
在调用时，传参可以直接写函数或者函数名

<script>
        function aa(){
            document.write('javascript')
        }
        setTimeout(aa,3000)

        setTimeout(function(){
            document.write('hello')
        },1000)
    </script>

我们也可直接写成字符串参数形式

setTimeout('document.write("qqqq");',3000)

如果我们不给它传第二个参数，那么默认是0

setTimeout(function(){
            document.write('hello')
        })

2.clearTimeout()

取消由setTimeout()方法设置的定时器

  function aa(){
            document.write('javascript')
        }
        dd=setTimeout(aa,3000)
        clearTimeout(dd)

setInterval()和setTimeout()使用方法是一样的。

前端开发语言

更多相关内容

javascript定时器取消定时器及优化方法
2020-12-12 14:38:20

javascript定时器取消定时器及js定时器优化方法通常用的方法：启动定时器： window.setInterval(Method,Time) Method是定时调用的js方法 Time是间隔时间，单位是毫秒取消定时器： clearInterval(Method);...

收起
js定时器的使用(实例讲解)
2020-12-02 13:01:57

在javascritp中，有两个关于定时器的专用函数，分别为： 1.倒计定时器：timename=setTimeout(“function();”,delaytime);2.循环定时器：timename=setInterval(“function();”,delaytime); 第一个参数“function()...

收起
JS定时器实现数值从0到10来回变化
2020-11-26 13:40:35

效果：数值从0到10来回变化代码： var a=0 var timer1,timer2; function add(){ a++; console.log(a); if(a>=10){ clearInterval(timer1); timer2=setInterval(sub,200); } } function sub(){ ...此

收起
轻松解决JavaScript定时器越走越快的问题
2021-01-19 15:51:55

解决JavaScript定时器越走越快的问题之前在项目中写了定时器来做循环播放，但是总是会有越走越快的问题，开始是以为前后的HTML代码拼接的有问题，时间紧急的情况下反复改了很多也没什么效果，后来发现是js定时器的...

收起
js定时器(执行一次、重复执行)
2020-12-09 07:25:54

1，只执行一次的定时器 代码如下: [removed] //定时器 异步运行 function hello(){ alert(“hello”); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout(...

收起
JavaScript定时器实现的原理分析
2020-11-26 10:11:00

JavaScript中的定时器大家基本在平时的开发中都遇见过吧，但是又有多少人去深入的理解其中的原理呢？下面我们就来分析一下定时器的实现原理。一、储备知识在我们在项目中一般会遇见过这样的两种定时器，第一种是...

收起
js定时器+简单的动画效果实例
2020-10-19 00:19:50

下面小编就为大家带来一篇js定时器+简单的动画效果实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

收起
js 定时器setTimeout无法调用局部变量的解决办法
2020-12-07 08:08:45

javascript中定时器setTimeout的用法一般如下，调用beginrotate之后就进入定时执行rotateloop的一个过程，如下代码：代码如下: var angle = 0; function rotateloop() { if (angle < 360) { angle++; //use ...

收起
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2020-11-23 10:53:48

下面给大家介绍下javascript定时器使用使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方法来实现定时器的效果，分别是 window.setTimeout()和window.setInterval。其中前者可以使一段

收起
js定时器怎么写？就是在特定时间执行某段程序
2020-12-07 13:35:26

我要在定时里面加一个页面跳转，然后在页面load的时候加载定时器。怎么写呢？要实现的就像百度上面那个发起即时消息的那个地方提示多少条消息。我的java查询条数的方法有了。怎么写js呢？ 定时器：用以指定在一段...

收起
javascript定时器，取消定时器，及js定时器优化方法
千次阅读 2017-11-19 12:16:23
----------------------------------------...1，只执行一次的定时器 //定时器 异步运行 function hello(){ alert("hello"); } //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2
--------------------------------------------------------------》1

1，只执行一次的定时器

<script>
//定时器异步运行
function hello(){
alert("hello");
}
//使用方法名字执行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
window.clearTimeout(t1);//去掉定时器
</script>

2，重复执行的定时器

<script>
function hello(){
alert("hello");
}
//重复执行某个方法
var t1 = window.setInterval(hello,1000);
var t2 = window.setInterval("hello()",3000);
//去掉定时器的方法
window.clearInterval(t1);
</script>

备注：

如果在一个页面中有两个方法，都是在页面加载完成之后执行的，实际却未能按先后顺序执行，可以参照如下方法解决：
可以在onload方法中添加一个定时器，设置一个定时器，“延迟”一段时间之后再运行，即可认为区分页面加载运行方法的先后顺序。

在javascritp中，有两个关于定时器的专用函数，分别为：

1.倒计定时器：timename=setTimeout("function();",delaytime);
2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成
“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。
　　倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。
比如你打开一个页面后，想间隔几秒自动跳转到另一个页面，则你就需要采用倒计定时器“setTimeout("function();",delaytime)” ，而如果想将某一句话设置成一个一个字的出现，
则需要用到循环定时器“setInterval("function();",delaytime)” 。

获取表单的焦点，则用到document.activeElement.id。利用if来判断document.activeElement.id和表单的ID是否相同。
比如：if ("mid" == document.activeElement.id) {alert();},"mid"便是表单对应的ID。

定时器：

用以指定在一段特定的时间后执行某段程序。

JS中定时执行,setTimeout和setInterval的区别,以及l解除方法

setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间，再进行某项操作。
setTimeout("function",time) 设置一个超时对象

setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
setInterval("function",time) 设置一个超时对象

SetInterval为自动重复，setTimeout不会重复。

clearTimeout(对象) 清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象

---------------------------------------------------------------------》2

关于js中两种定时器的设置及清除
1、JS中的定时器有两种：

window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法[function],当方法执行完成定时器停止(但是定时器还在,只不过没用了);

window.setInterval([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法[function],当方法执行完成,定时器并没有停止,以后每隔[interval]这么长的时间都会重新的执行对应的方法[function],直到我们手动清除定时器为止;

2、JS中的定时器是有返回值的:->返回值是一个数字,代表当前是第几个定时器

var timer1=window.setTimeout(function(){},1000); //timer1->1 当前是第一个定时器

var timer2=window.setTimeout(function(){},1000); //timer2->2 当前是第二个定时器

window.clearTimeout(timer1); //->把第一个定时器清除掉,这里也可以用window.clearInterval(timer1)、window.clearTimeout(1)、window.clearInterval(timer1);

var timer3=window.setTimeout(function(){},1000); //timer3->3 当前是第三个定时器 ,虽然上面的定时器timer1清除掉了,但是号还是继续往后排的;

3、清除定时器：

window.clearInterval(timer1)/window.clearTimeout(time1)；两种清除方式都可以清除通过setTimeout和setInterval设置的定时器(两种方式在设置定时器的时候有区别，清除定时器的时候没有区别)，并且参数不仅可以是timer，还可以是其返回值，例如1,2；需要注意的是，定时器即使清除了，其返回值也不会清除，之后设置的定时器的返回值也会在其返回值的基础上继续向后排，这点类似于银行的排队领号，即使1号的业务办理完了，后边的人仍是从2号开始继续领号，而不是重新从1开始；
-----------------------------------------------------------------------》3

通常用的方法：

启动定时器：
[javascript] view plain copy

window.setInterval(Method,Time)
Method是定时调用的js方法

Time是间隔时间，单位是毫秒

取消定时器：
[javascript] view plain copy

clearInterval(Method);
那么问题来了。用 clearInterval(timerid);来清除，往往不能马上停止，用什么方法比较好解决？

优化方案如下
[javascript] view plain copy

var timeout = false; //启动及关闭按钮
function time()
{
  if(timeout) return;
  Method();
  setTimeout(time,100); //time是指本身,延时递归调用自己,100为间隔调用时间,单位毫秒
}
总结
一般不用setInterval，而用setTimeout的延时递归来代替interval。
setInterval会产生回调堆积，特别是时间很短的时候。
收起
展开全文
延时跳转加载 setTimeout
js定时器
2019-08-05 01:13:08

NULL 博文链接：https://vernonchen163.iteye.com/blog/2040342

收起
JS定时器实例
2021-01-19 19:31:29

倒计定时器：timename=setTimeout(“function();”,delaytime);2.循环定时器：timename=setInterval(“function();”,delaytime);第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几...

收起
JavaScript定时器使用方法详解
2020-11-20 22:14:51

本文实例为大家分享了JavaScript定时器使用的具体代码，供大家参考，具体内容如下定时器分类 1、循环执行：一段程序能够每间隔一段时间执行一次【setInterval()】【clearInterval()】 2、定时执行（一次定时器）：...

收起
获取焦点时,利用js定时器设定时间执行动作
2020-12-12 22:32:46

进入正题，先说说定时器。在javascritp中，有两个关于定时器的专用函数，分别为： 1.倒计定时器：timename=setTimeout(“function();”,delaytime); 2.循环定时器：timename=setInterval(“function();”,delaytime...

收起
javascript定时器完整实例
2020-10-24 17:58:42

主要介绍了javascript定时器完整实现方法,以实例形式分析了定时器的嵌套调用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

收起
js定时器实现倒计时效果
2021-01-19 16:12:52

本文实例为大家分享了js定时器实现倒计时效果展示的具体代码，供大家参考，具体内容如下日期函数倒计时 = 用将来的时间 – 现在的时间问题：将来时间距离 1970 毫秒数 – 现在距离 1970年1 用将来的...

收起
JS定时器实例详细分析
2020-10-26 20:19:53

在javascritp中，有两个关于定时器的专用函数，下面讲解一下两个定时器，有需要的朋友可以参考一下

收起

Javascript定时器案例

2021-12-18 15:58:30

<!... <... <head> ...meta charset="utf-8">...script type="text/javascript"> window.onload = function(){ /* 使图片可以自动切换 */ //获取img标签 var img1 = document.get

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				/*
				使图片可以自动切换
				*/
			    //获取img标签
			    var img1 = document.getElementById("img1");
			   
			   //创建一个数组来保存图片的路径
				var imgArr = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"];
				
				//创建一个变量，用来保存当前图片的索引
				var index = 0;
				
				//定义一个变量，用来保存定时器的标识
				var timer;
				
				//为btn01绑定-个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					
					/*
					目前，我们每点击一次按钮，就会开启一个定时器，
					点击多次就会开启多个定时器，这就导致图片的切换速度过快，
					并且我们只能关闭最后一次开启的定时器

					*/
				    
					//在开启定时器之前，需要将当前元素上的其他定时器关闭
					clearInterval(timer);

					
				    /*
					开启一个定时器，来自动切换图片
					*/
					timer = setInterval(function(){
						//使索引自增
						index++;
									
						//判断索引是否超过最大索引
						//第一种写法
						/*
						if(index >= imgArr.length){
							//则将index设置为0
							index = 0;
						}
						*/
						//第二种写法
						index %= imgArr.length;
									
						//修改img1的src属性
						img1.src = imgArr[index];
					},1000); 
				};
				
				//为btn02绑定-个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//点击按钮以后，停止图片的自动切换，关闭定时器
					/*
					 * clearInterval()可以接收任意参数，
					 * 	如果参数是一个有效的定时器的标识，则停止对应的定时器
					 * 	如果参数不是一个有效的标识，则什么也不做
					 */
					clearInterval(timer);
					
				};
				

			};
		</script>
	</head>
	<body>
		<img id="img1" src="images/1.jpg" />
		<br/> <br/>
		<button id="btn01">开始</button>
		<br/> <br/>
		<button id="btn02">结束</button>
	</body>
</html>

效果：
在这里插入图片描述

收起

展开全文

前端

JavaScript定时器和优化的取消定时器方法
2021-01-19 17:50:30

Method是定时调用的js方法 Time是间隔时间，单位是毫秒取消定时器：代码如下: clearInterval(Method); 那么问题来了。用 clearInterval(timerid);来清除，往往不能马上停止，用什么方法比较好解决？优化方案...

收起
js定时器实例红绿灯效果网页
2020-10-08 21:00:41

采用js、h5、css技术实现一个红绿灯的效果，主要使用了js的定时器技术，亮灯顺序为红-黄-绿-黄-红依次无限循环。由灯杆上的绿色、红色按钮控制开关，绿色控制打开，红色控制关闭

收起
JavaScript定时器介绍与运用
2021-05-18 19:20:35

JavaScript定时器 JS的程序的执行速度是非常快的。如果想一段程序可以每间隔一段时间执行一次，可以使用定时器进行调用在JavaScript中定时器分为两种：定时器与延时定时器其中定时器中有两种属性：...

JavaScript定时器

   JS的程序的执行速度是非常快的。如果想一段程序可以每间隔一段时间执行一次，可以使用定时器进行调用

   在JavaScript中定时器分为两种：定时器与延时定时器

   其中定时器中有两种属性：setInterval()定时调用、clearInterval()关闭定时器

   setInterval()定时调用

      可以将一个函数，每隔一段时间执行一次

      参数：

      1.回调函数，该函数会每隔一段时间被调用一次

      2.每次调用间隔的时间，单位是毫秒

      返回值：

         返回一个Number类型的数据

         这个数字用来作为定时器的唯一标识

   clearInterval()

可以用来关闭一个定时器

      方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器

   下图是setInterval()、clearInterval()结合使用的一段代码

延时定时器：

   延时调用

      延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次

      延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次

      延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择



   clearTimeout ()

   延时调用代码执行时，需要使用clearTimeout ()来关闭一个延时调用



下面运用定时器实现简单的显示当前时间：

先使用HTML跟CSS进行一个简单的页面布局，布局如下：

然后给开始与暂停两个按钮绑定鼠标点击事件：

写个判断语句，判断是true或false，为true时开始，为false

时停止

最后，代码如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

    <style>

       *{

           margin: 0;

           padding: 0;

       }

       body{

           background:url("images/pt.jpg") no-repeat;

           background-size: 100%;

           color: #fff;

       }

       .container{

           margin: 100px auto;

           text-align: center;

           font-size: 6rem;

           font-weight: 300;

       }

       .rq{

           margin: 100px auto 50px;

           text-align: center;

           font-size: 6rem;

       }

       .fm{

           font-size: 10rem

       }

       .btngroup{

           text-align: center;

       }

       .btngroup button{

           margin: 0 10px;

           padding: 30px 100px;

           border: none;

           border-radius: 5px;

           font-size: 2rem;

           color: #fff;

           cursor: pointer;

       }

        .btngroup button:first-child{

           background: #000;

       }

       .btngroup button:last-child{

           background: #49B2D8;

       }

    </style>

</head>

<body>

    <div class="container" >

       <div class="rq">

           <span id="loth"></span>

       </div>

       <div class="fm">

           <span id="hours">00</span> :

           <span id="minute">00</span> :

           <span id="second">00</span>

       </div>



    </div>

    <div class="btngroup">

       <button id="start">开始</button>

       <button id="stop">暂停</button>

    </div>

</body>

    <script>

       var timer=null;

       var transfor=false;

       window.οnlοad=function(){

           var btnstart=document.getElementById("start");

           var btnstop=document.getElementById("stop");

           btnstart.οnclick=function(){

              if(transfor==true){

                     return;

                  }

              timer=setInterval(function(){

                  showTime();

              },100);

              transfor=true;

           };

           btnstop.οnclick=function(){

              clearInterval(timer);

              transfor=false;

           }

       }

       function showTime(){

           var d=new Date();

           var year=d.getFullYear();

           var month=d.getMonth()+1;

           var date=d.getDate();

           var hours=d.getHours();

           var minute=d.getMinutes();

           var second=d.getSeconds();

           month=month<=9?"0"+month:month;

           date=date<=9?"0"+date:date;

           hours=hours<=9?"0"+hours:hours;

           minute=minute<=9?"0"+minute:minute;

           second=second<=9?"0"+second:second;

           var str=year+"年"+month+"月"+date+"日";

       document.getElementById("loth").innerHTML=str;

       document.getElementById("hours").innerHTML=hours;

       document.getElementById("minute").innerHTML=minute;

      document.getElementById("second").innerHTML=second;

       }

    </script>

</html>

下图是代码运行的效果图：

收起

展开全文