定时调用setInterval

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

setInterval（参数1，参数2）

参数1 ----回调函数，该函数每隔一段时间就会执行一次

参数2 ----每次调用执行的时间，单位是毫秒

例子：数字开启跳动

<p id="num">1<p/>

var num =document.getElementById("num");var couter = 1 ; setInterval(function(){num.innerHTML = couter++;},500);

如上所示，p标签里面的数字就会每隔500毫秒（也就是0.5秒）执行一次，从1开始跳动

但是，因为couter一直出于自增，所以这个定时器函数会一直停不下来......从1到正无穷~

在日常开发中，我们想要把定时器关闭，应该怎么做呢？

使用clearInterval()

clearInterval()

clearInterval（参数）可以用来关闭一个定时器；

而这里面的参数写的又应该是什么呢？

从上面的例子中，setInterval（）可以拥有一个返回值，作为这个定时器的标识（timer）

我们将上面的例子进行改进，在setInterval（）函数的前面添加一个标识timer

var num =document.getElementById("num");var couter = 1 ; var timer =  setInterval(function(){num.innerHTML = couter++;},500);

当我们想当数字跳到20的时候，就不再变化的时候，可以这样写

var num =document.getElementById("num");var couter = 1 ; var timer =  setInterval(function(){num.innerHTML = couter++;//alert(num.innerHTML);if(couter == 11){clearInterval(timer);}},500);

注意clearInterval（timer）这句代码的意思就是：把timer对应的定时器关掉。

设置timer标识的好处是，一个是当setInterval（）想要关闭的时候，cleanInterval（）可以识别出是哪个定时器想要关闭。

//定义多个定时器
var timer1 =  setInterval(function(){....},500);
var timer2 =  setInterval(function(){....},400);
var timer3 =  setInterval(function(){....},1000);
.....//关闭定时器
cleanInterval(timer1);
cleanInterval(timer2);
cleanInterval(timer3);
.....

setTimeout()延时调用

setTimeout（参数1，参数2）

参数1 --- 调用的函数

参数2 --- 多少秒后执行的时间，单位为毫秒

setTimeout（function(){....}，1000）

setTimeout(function(){alert("hello js");
},2000)//两秒后执行alert函数 并且只执行一次，就不会再执行

setInterval(function(){...}，参数2)和setTimeout(function(){...}，参数2)

共同点：

都是定时器调用，且调用的都是函数。

不同点：

setInterval()是每隔一段时间之后执行一次且有setInterout来关闭。可以执行N次

setTimeout()是每隔一段时间之后执行一次，没有对应的关闭，执行一次就没了。只能执行1次

当然，setTimeout也有一种特殊写法，可以使它和setInterval()一样执行很多次

function fun(){alert("hello,js");setTimeout(fun(),1000);//不断的调用函数fun，则形成了和setInterval一样的执行很多次
}
fun();

但是这样写会让fun函数一直执行没有停止，而且setTimeout没有像setInterval那样子有setInterout来关闭。（setTimeout孤军奋战）；

这个时候要想来关闭setTimeout只能靠一些循环语句来限定它什么时候执行

function fun(){var i=0;if(i<20){i++;alert("hello,js");setTimeout(fun(),1000);//不断的调用函数fun，则形成了和setInterval一样的执行很多次}
}
fun();

这样子的话setTimeout就可以有限制条件而开启或关闭啦~

总结：所以有时候setIntveral和setTimeout是可以相互代替的

js--定时器的使用相关推荐

js 定时器（setTimeout/setInterval）出现变量未定义（xxx is not defined）的解决方法
js 定时器(setTimeout/setInterval)出现变量未定义(xxx is not defined) 的解决方法参考文章: (1)js 定时器(setTimeout/setInterv ...
的setinterval函数_Vue定时器与JS 定时器 setInterval() 和 setTimeout()
H5前端开发社区专注更多编程教程和电子书天天在用钱在vue中,有两套定时器,一套是浏览器API,window对象上的:另一套就是vue/nodejs封装的,需要引入 import { setInter ...
js定时器和linux命令locate
js定时器如果带有参数,应该采用如下方式 setTimeout(function(){function(param)},1000); 匿名函数的方法. linux locate基于数据库的查找方法. ...
ajax定时器怎么写,js定时器怎么写？就是在特定时间执行某段程序
js定时器怎么写?就是在特定时间执行某段程序复制代码代码如下: $(function(){ var handler = function(){ } var timer = setInterval( ...
js 定时器用法详解——setTimeout()、setInterval()、clearTimeout()、clearInterval()
写在前面: 在js应用中,定时器的作用就是可以设定当到达一个时间来执行一个函数,或者每隔几秒重复执行某段函数.这里面涉及到了三个函数方法:setInterval().setTimeout().clea ...
JS 定时器的4种写法及介绍
JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout.setInterval.setImmediate.requestAnimationFrame. 一.什么是定时 ...
深入浅出JS定时器：从setTimeout到setInterval
前言当谈到 JavaScript 编程语言最基本的概念时,定时器就是一个必须掌握的知识点.在编写网站时,你经常会遇到需要在一定时间间隔内执行一些代码的情况.这时候,JavaScript 定时器就可以 ...
Vue进阶（七十八）：Vue 定时器与 JS 定时器
文章目录一.Vue 定时器二.JS 定时器一.Vue 定时器在vue中,有两种定时器,一是浏览器API,window对象上的:另一种就是vue/nodejs封装的,需要引入. import { ...
9_js 日期对象Date()、js定时器、获取窗口属性、获取dom尺寸、脚本化css
日期对象Date() 封装函数,打印当前是何年何月何日何时,几分几秒直接看w3c上的介绍吧 https://www.w3school.com.cn/js/jsref_obj_date.asp js定 ...
js定时器，实现每天早上9点执行代码片段，完整代码
js定时器,实现每天早上9点执行代码片段,完整代码 1.hour:小时,minute:分钟,callTask:函数 function setScheduledTask(hour, minute, ca ...

js--定时器的使用

定时调用setInterval

clearInterval()

setTimeout()延时调用

setInterval(function(){...}，参数2)和setTimeout(function(){...}，参数2)

js--定时器的使用相关推荐

最新文章

热门文章