js定时器的使用

l 定时器

n 定时器分类以及基本用法

1、定时器简介

js定时器是利用js实现定时的一种方法，在网站上有很多用途都是用到定时器。

例如图片轮播的实现，还有一些广告弹窗，但凡可以自动执行的东西，都是可以和定时器有关的。

2、定时器分类

image.png

a. setTimeout: 设置一个定时器，在定时器到期后(延迟执行)执行一次函数

b. setInterval: 以固定的时间间隔(间歇执行)重复调用一次函数

c. clearInterval() 方法可取消由 setInterval() 设置的 timeout。

d. clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。

3、定时器语法结构

① [setTimeout](http://caibaojian.com/t/settimeout "View all posts in setTimeout")(code,millisec)

code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。1秒= 1000毫秒

setTimeout返回的是延迟执行的id值

实例代码：

setTimeout(function(){

        alert(13);

  },1000)

②clearTimeout(id_of_settimeout)
id_of_settimeout :由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。

③ setInterval(code,millisec)

code:必需。要调用的函数或要执行的代码串。

millisec:必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

实例代码：

setInterval(function(){

    //内容

},5000)

④clearInterval(id_of_setinterval)

id_of_setinterval：由 setInterval() 返回的 ID 值。如果停止了对应的timer(id值),在开始的时候从上一次结果继续运行

注：为了方便后期清除定时器，可以这样定义

var timer = setTimeout(code , time)/setInterval(code,time);

clearInterval(timer)

总结： setInterval/setTimeout用法同理

1. 页面加载的时候

setInterval(function(){},1000)

2. 事件函数的时候

button.onclick = function(){

    setInterval(function(){},1000)

}

2-2 要执行的函数已经单独定义了

setInterval(函数名,1000)

function 函数名(){

}

2-3 setInterval在函数的内部调用

function 函数名(){

    setInterval(function(){},1000)

}

//调用函数

函数名();

4、时间单位

无论是setTimeout函数还是setInterval函数，时间单位都是以毫秒计

5、使用场景

例如：烦人的广告、轮播图等

6、示例代码

(1) 页面加载后控制台输出hello world

image.png

(2) 页面显示开始按钮和结束按钮，点击开始实现在控制台显示自动输出内容功能，点击结束按钮停止输出

image.png

总结： 定时器的分类？他们的区别及用法是什么？

Js中有两种定时器：setInterval：间歇执行，setTimeout：延迟执行

setInterval(函数，时间)

语法：setInterval(function(){},1000);

时间单位ms，隔一秒执行函数一次

一般用于倒计时，轮播图

setTimeout(函数，时间)

语法：setTimeout(function(){},1000);时间单位ms，

隔一秒执行函数一次

一般用于广告，广告弹出层

封装一个运动函数

/**
* 封装一个元素的运动函数
* @param obj 元素本身
* @param attr 元素属性
* @param step 元素步长
* @param target 目标值
*/
var timer = null;
function move(obj,attr,step,target){
    clearInterval(timer);
    timer = setInterval(function(){
      //1.在当前值的基础上 + step
      var speed = parseInt(getStyle(obj,attr))+step;
      //2、到达目标点停止
      if(speed>=target && step>0){ //往前走用的判断 step：正的
          speed = target;
          clearInterval(timer);
      }
      if(speed<=target && step<0){ //往后走用的判断 step：负的
          speed = target;
          clearInterval(timer);
       }
       obj.style[attr] = speed + 'px';
    },30)
}