1.setInterval开启定时器

* setInterval()*     - 定时调用*     - 可以将一个函数，每隔一段时间执行一次*    - 参数：*       1.回调函数，该函数会每隔一段时间被调用一次*      2.每次调用间隔的时间，单位是毫秒* *     - 返回值：*      返回一个Number类型的数据*        这个数字用来作为定时器的唯一标识

         setInterval(function() {h.innerHTML = count++;}, 1000);

2.关闭定时器

clearInterval()可以用来关闭一个定时器
方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
* clearInterval()可以接收任意参数，
*   如果参数是一个有效的定时器的标识，则停止对应的定时器
*   如果参数不是一个有效的标识，则什么也不做

开启定时
var timer = setInterval(function(){},30)

关闭定时器
clearInterval(timer);

3.小练习：自动切换图片

//获取img标签var img1 = document.getElementById("img1");//创建一个数组来保存图片的路径var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/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设置为0index = 0;}*/index %= imgArr.length;//修改img1的src属性img1.src = imgArr[index];}, 1000);};//为btn02绑定一个单击响应函数var btn02 = document.getElementById("btn02");btn02.onclick = function() {//点击按钮以后，停止图片的自动切换，关闭定时器/** clearInterval()可以接收任意参数，*     如果参数是一个有效的定时器的标识，则停止对应的定时器*  如果参数不是一个有效的标识，则什么也不做*/clearInterval(timer);};

js 定时器setInterval相关推荐

的setinterval函数_Vue定时器与JS 定时器 setInterval() 和 setTimeout()
H5前端开发社区专注更多编程教程和电子书天天在用钱在vue中,有两套定时器,一套是浏览器API,window对象上的:另一套就是vue/nodejs封装的,需要引入 import { setInter ...
JS 定时器setInterval clearInterval 延时器setTimeOut 异步动画
Interval间隔 clearInterval 延时器setTimeOut 异步asynchronous 动画
9_js 日期对象Date()、js定时器、获取窗口属性、获取dom尺寸、脚本化css
日期对象Date() 封装函数,打印当前是何年何月何日何时,几分几秒直接看w3c上的介绍吧 https://www.w3school.com.cn/js/jsref_obj_date.asp js定 ...
js 定时器（setTimeout/setInterval）出现变量未定义（xxx is not defined）的解决方法
js 定时器(setTimeout/setInterval)出现变量未定义(xxx is not defined) 的解决方法参考文章: (1)js 定时器(setTimeout/setInterv ...
js 定时器用法详解——setTimeout()、setInterval()、clearTimeout()、clearInterval()
写在前面: 在js应用中,定时器的作用就是可以设定当到达一个时间来执行一个函数,或者每隔几秒重复执行某段函数.这里面涉及到了三个函数方法:setInterval().setTimeout().clea ...
深入浅出JS定时器：从setTimeout到setInterval
前言当谈到 JavaScript 编程语言最基本的概念时,定时器就是一个必须掌握的知识点.在编写网站时,你经常会遇到需要在一定时间间隔内执行一些代码的情况.这时候,JavaScript 定时器就可以 ...
js 解决页面切换时，定时器setInterval 会变得越来越慢
在项目中经常会用到自定义动画或者自定义一些无缝滚动什么的,需要用到js中的定时器setinterval,但是,楼主发现在项目中测试的时候,切换页面或者浏览器上面的页签时,定时器明明没有收到干扰,但是页 ...
JS定时器setTimeout和setInterval介绍
JS定时器setTimeout和setInterval介绍 JavaScript 定时器,有时也称为"计时器",用来在经过指定的时间后执行某些任务.avaScript 中提供了两种 ...
js定时器用法详解——setTimeout()、setInterval()、clearTimeout()、clearInterval()
写在前面: 在js应用中,定时器的作用就是可以设定当到达一个时间来执行一个函数,或者每隔几秒重复执行某段函数.这里面涉及到了三个函数方法:setInterval().setTimeout().clea ...

js 定时器setInterval

定时器setInterval

1.setInterval开启定时器

2.关闭定时器

3.小练习：自动切换图片

js 定时器setInterval相关推荐

最新文章

热门文章