Js 中的定时器

Posted jason|song

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Js 中的定时器相关的知识,希望对你有一定的参考价值。

定时器


前言

通过定时器自动的做一些事情,例如发送网络请求


一、定时器

定时器:定时器可以设定时间自动的做某件事情。定时器是一种方法,不是对象,定时器属于 window 对象。

二、定时器具体内容

  1. 周期性定时器:间隔一定的时间,自动的做某件事情 setInterval(函数名,间隔时间)
  2. 一次性定时器:延迟多长时间做某件事情一次 setTimeout(函数名,间隔时间)
  3. 上面这两个设置定时器的方法会返回一个线程号,这个线程号可以用来清除定时器,脚本中包含多个定时器,这个线程号就可以用来标记清除哪一个 var index = console.log(setInterval(函数名,间隔时间))
  4. 清除定时器的方法 clearInterval(线程号) clearTimeout(线程号)
  5. 定时器最好设置在全局作用域中,因为设置在局部作用域中的话,只能在设置定时器的那个函数中去暂停定时器,但是实际工作中,暂停定时器和设置定时器时在不同的函数中进行的,所以定时器的变量要设置成全局变量,方便使用。
  6. 定时器是我们第一个遇到的异步的方法
  7. 之前的所有方法都是同步的,同步的方法在 js 中执行的顺序上是写在前面的代码就会先执行,不管前面的语句需要多久的时间来执行完毕,前面的语句执行完成之后,后面的代码才会执行。
  8. 同步和异步的语句同时存在的时候,同步的一定先于异步的执行完毕。就算异步的代码的间隔时间设置为 0,并且异步的代码写在了同步的代码之前。同步的代码也会先于异步的代码执行完毕。

三、定时器实例

基本的语法

const intervalID = setInterval(myCallback,1000);  // setInterval() 的返回值为一个线程号,这个线程号可以用在清除定时器的函数中 clearInterval(线程号)
        function myCallback(a,b)
            var a = "jason";
            var b = "song";
            console.log(a);
            console.log(b);
         

通过点击开始按钮就开始显示时间,通过点击结束按钮就结束显示时间

 var start = document.getElementById("start");
        var stop = document.getElementById("stop");
        var index;
        function begin()
            index = setInterval(go,1000);    // setInterval() 函数返回线程号  //通过在外面声明的全局变量 index 使得其他地方可以使用这个线程号
        
        // console.log(index);
        function go()
            var date = new Date();
            console.log(date);
        
        start.onclick = begin;
        stop.onclick=function()
            clearInterval(index);
        

总结

总结了周期性定时器和一次性定时器的使用方法

怎么用js 中的定时器实现这种效果?

大家好 看看这个效果用原生js 怎么实现,貌似是用定时器一秒切换一个class,而且前三个是红色,其余的都是灰色,想请教一下各位这个怎么实现?

定时器循环,逐个处理。事先弄个div,在需要的时候显示出来,设置它显示的位置。你要动手写,不要光问,写写就自然会明朗起来。 参考技术A 如果你是在学习JS,下面是这个效果的实现思路:
首先,css样式部分需要写两个单独的class,一个是设置背景色为红色,一个是设置背景色为灰色。比如:
.red background: red;
.gray background: gray;
这两条样式只设置背景色,用来给定时器切换使用。
然后是Js部分的定时器实现逻辑:
第一步,获取需要切换class的所有标签,假设上面效果中的选项都使用的是a标签,即 var allA = parent.getElementsByTagName('a'); (parent为所有a标签的父级标签,需要提前获取)
第二步,声明一个变量用来当作索引(用来标记第几个要添加背景色)
var index = 0;
第三步,使用循环定时器(setInterval),在定时器中,先清除所有a标签上的className,然后给需要添加背景的a标签添加class,添加的时候判断当前的标签是不是第一个,是就用red背景的class,不是则用gray背景的class。
for () allA[].className = ''
allA[index].className = index == 0 ? 'red' : 'gray';
通过以上三个步骤就可以实现你所说的效果了。
上面的代码是基本思路,有所简化,并不是完整代码,对于初学者应该是可以理解的。

以上是关于Js 中的定时器的主要内容,如果未能解决你的问题,请参考以下文章

前端 之 JavaScript : JS的面向对象; 定时器; BOM

前端主要学啥

前端技术学习路线及技术汇总

前端- jquery- 总结

前端学习路线

前端学习路线