资讯专栏INFORMATION COLUMN

JS基础入门篇(十三)—定时器

BenCHou / 2590人阅读

摘要:但是定时器没关。通过变量来控制定时器内函数的执行停止播放默认为。方式三通过关闭定时器来停止轮播图的运动。,通过传入定时器的编号来。清除定时器,再开启定时器。所以,每次打开定时器,先清除前一个。点击页面任何一个位置关闭定时器。

1.定时器

定义当我们需要隔一段时间,再执行一段代码。或者每隔一段时间,执行一段代码。我们可以使用定时器。
使用场景:例如网站轮播图的自动滚动。广告延迟弹出的某些操作

2.定时器-setInterval

定时器-setInterval基本定义

setInterval
间隔型定时器:每隔一段时间执行一段代码。
注意:代码一般会重复执行

语法
setInterval(函数,时间间隔);
eg:
setInterval(fn,20);指的是每隔20 毫秒执行一段函数
时间间隔的单位 : 是毫秒(ms)1s = 1000ms

返回值
setInterval(重复执行的代码,时间间隔);这段代码的返回值是分配定时器一个独有的编号。这个编号跟关闭定时器有关。当你开启很多定时器的时候,你想关闭哪一个定时器,就需要知道对应的编号然后关闭。就是每开启一个定时器,会给这个定时器贴一个编号,编号是数字类型的,会由这段代码的返回值传递出编码。

使用举例1—无参函数

 

使用举例2—有参函数

注意:

以下是代码执行结果:先打印222和333。之后1s后打印1.

3.setInterval—轮播图



    
    Title
    


自动播放效果,可以点击查看。因为codepen不方便放图片,就用颜色代替

4.setInterval—轮播图的停止

css样式我就删除了,直接给出js和html。需要全部代码的可以从链接下面去看。点击链接中的css,html,js都可以查看对应的代码。

方式一:控制步长来停止轮播图的运动,但是定时器还没关(听语言描述可能有些模糊,直接上代码)
通过步长来控制停止轮播图的运动,点击查看效果


方式二:通过一个变量来控制定时器中函数的执行,但是定时器还是没关。
通过onoff变量来控制定时器内函数的执行


方式三:通过关闭定时器来停止轮播图的运动。
此方法简洁,不需要添加额外的变量。但是有时候也需要以上两种方法。
直接关闭定时器,点击css,html,js可以查看对应代码


5.setInterval—轮播图的停止和开始

方式一:清除定时器,再开启定时器。
清除定时器,再开启定时器。注意:重新开启定时器的时候也要清除前一个定时器




    
    Title
    


方式二:使用变量控制定时器的开始与停止
使用step步长控制定时器的开始与停止

方式三:使用变量重新开始定时器
使用变量重新开始定时器


6.定时器-setTimeout

定时器-setTimeout基本定义

延迟型定时器

隔一段时间执行一段代码(执行一次)

语法:
setTimeout(函数,时间间隔)
比如setTimeout(fn,20)

隔(等待)20 毫秒执行一段函数

时间间隔的单位 :是毫秒(ms)
1s = 1000ms

返回值:定时器唯一的编号

注意:虽然只执行一次,就不执行了。但是还是要关闭定时器,不然会消耗性能。

1.举例说明
点击查看以下代码效果

2.使用递归,让setTimeout定时器有setInterval的效果
点击链接查看以下代码效果!!!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95284.html

相关文章

  • JS基础入门十三)—时器

    摘要:但是定时器没关。通过变量来控制定时器内函数的执行停止播放默认为。方式三通过关闭定时器来停止轮播图的运动。,通过传入定时器的编号来。清除定时器,再开启定时器。所以,每次打开定时器,先清除前一个。点击页面任何一个位置关闭定时器。 1.定时器 定义:当我们需要隔一段时间,再执行一段代码。或者每隔一段时间,执行一段代码。我们可以使用定时器。使用场景:例如网站轮播图的自动滚动。广告延迟弹出的某些...

    kaka 评论0 收藏0
  • JS基础入门十三)—时器

    摘要:但是定时器没关。通过变量来控制定时器内函数的执行停止播放默认为。方式三通过关闭定时器来停止轮播图的运动。,通过传入定时器的编号来。清除定时器,再开启定时器。所以,每次打开定时器,先清除前一个。点击页面任何一个位置关闭定时器。 1.定时器 定义:当我们需要隔一段时间,再执行一段代码。或者每隔一段时间,执行一段代码。我们可以使用定时器。使用场景:例如网站轮播图的自动滚动。广告延迟弹出的某些...

    ermaoL 评论0 收藏0
  • JS基础入门(四十三)—ES6(二)

    摘要:对象简洁表示法原来写法简洁写法方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。方法按照原始数组元素顺序依次处理元素。注意不会对空数组进行检测。运行结果为举例说明二其中是函数,当没有第二个参数时。有三个参数,并没有深入研究。 1.对象简洁表示法 原来写法 var name = lzf; var gender = male; var fn = fu...

    刘厚水 评论0 收藏0
  • JS基础入门(四十三)—ES6(二)

    摘要:对象简洁表示法原来写法简洁写法方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。方法按照原始数组元素顺序依次处理元素。注意不会对空数组进行检测。运行结果为举例说明二其中是函数,当没有第二个参数时。有三个参数,并没有深入研究。 1.对象简洁表示法 原来写法 var name = lzf; var gender = male; var fn = fu...

    rozbo 评论0 收藏0
  • JS基础入门(三十三)—正则表达式

    摘要:举例一使用这个正则,打印结果为使用这个正则,打印结果为举例二打印结果如下过滤标签你好美丽的上海想转化成你好,美丽的上海如果后面加,就会进入非贪婪模式。如果后面不加,就会进入贪婪模式,结果为上海。你好美丽的上海。 1.创建一个正则表达式 方法一:使用一个正则表达式字面量,其由包含在斜杠之间的模式组成。 var reg1 = /a/; var reg2 = /ab+c/; 方法二:调用Re...

    caspar 评论0 收藏0

发表评论

0条评论

BenCHou

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<