DOM第六章 定时器

第六章 定时器

第一讲.定时器简介

JS的程序执行速度是非常快的

如果希望一个程序可以每间隔一段时间间隔一次,可以使用定时调用

setInterval( )定时调用 可以将一个函数每隔一段时间执行一次

参数:

1. 回调函数,该函数会每隔一段时间被调用一次
2. 每次调用间隔的事件,单位是毫秒

var timer=setInterval(function(){
    count.innerHTML=num++;
},1000)

这个方法会返回一个number类型的数据,这个数字用来作为定时器的唯一标识

clearInterval( )方法 可以用来关闭一个定时器

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

这个方法可以兼容任意参数,甚至是undefined,如果参数是一个有效的定时器标识,则停止对应的计时器

如果参数不是一个有效的标识,则什么也不做

if(num==11){
    clearInterval(timer);
}

一个将数字不断循环的方法:

index=index%arr.length;

如果设置单击按钮开启定时器,则每点击一次按钮就会开启一个定时器,点击多次就会开启多个

但是关闭只能关闭最后一个.因此,在开启一个新的定时器之前,需要关闭上一个定时器

可以利用定时器,来使按下键盘按键时,元素的移动没有防止误触的停顿

第二讲.延时调用

setTimeout( )方法 延时调用

指的是,一个函数不马上执行,而是隔一段时间以后再执行,且只执行一次

延时调用和定时调用的区别是:

定时调用会执行多次,而延时调用只执行一次

常用于开屏广告.

使用clearTimeout( )可以关闭一个演示调用,参数同样为调用的返回值

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

开发中常用的是定时调用

补充

第一讲.类的操作

通过style属性来修改浏览器的样式,每修改一个样式,浏览器就要重新渲染一次页面

这样执行的性能是比较差的,而且这种形式当我们要修改多个样式时,也不太方便

因此在开发时不建议使用style标签修改样式,而是希望一行代码修改多个样式

我们可以通过修改元素的class属性来间接的修改样式

这样一来,我们只需要修改一次,即可同时修改多个样式.

浏览器只需要渲染一次,性能比较好,并且这种方式可以使表现和行为进一步分离

.b1{
    width:100px;
    height:100px;
    background-color:red;
}
.b2{
    background-color:#bfa;
}

btn.onclick=function(){
    if(!/\bb2\b/.test(btn.className)){//判断是否有b2,且b2独立存在
        box.calssName+=' b2';//这样会不丢失b1已有的样式,而只是使用b2覆盖掉某些样式
    }
}

第二讲.JSON

JS中的对象只有JS自己认识,其他的语言都不认识

如何转换成其他语言认识的东西?

可以转换成相同内容的字符串,这样其他语言也能认识.这个字符串就是JSON

JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言识别,并且可以转换成任意语言的对象

JSON: JavaScript Object Notation JS对象表示法

JSON和JS对象格式一样,只不过JSON字符串中的属性名必须加双引号

JSON分类:

1. JSON对象 { }
2. JSON数组 [ ]

JSON中允许的值只有:字符串,数值,布尔值,null,对象和数组

不论如何嵌套都是允许的,但是只能有这几个东西

var obj='{"name"="孙悟空","age"=18,"gender"="男"}';

讲JSON字符串转换为JS对象:

在JS中,为我们提供了一个工具类,叫JSON

这个对象可以帮我们将一个JSON转换成JS对象,也可以将一个JS对象转换成JSON

1. json->js对象

   JSON.parse( ) 需要一个JSON字符串作为参数,会将该字符串转换为JS对象

2. js对象->json

   JSON.stringify( ) 可以将一个JS对象转换为JSON字符串

   需要一个js对象作为参数,会返回一个JSON字符串

eval( )函数:
可以用来执行一段字符串形式的js代码,并将执行结果返回

如果使用eval( )执行的字符串中有{ },它会将其当成代码块

如果不希望当成代码块,则需要在字符串前后各加一个( )

eval('('+str+')');

性能过于强大,有安全隐患