js定时器

最新推荐文章于 2018-12-07 19:31:47 发布

scralet-moon

最新推荐文章于 2018-12-07 19:31:47 发布

阅读量105

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_43682329/article/details/84671308

版权

HTML 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

定时器在javascript中的作用

1、制作动画
2、异步操作
3、函数缓冲与节流

定时器类型及语法

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

语法
        setInterval(code,millisec,lang)

参数	描述
code	必需。要调用的函数或要执行的代码串。
millisec	必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
lang	可选。 JScript、 VBScript 、JavaScript

setTimeout() - 暂停指定的毫秒数后执行指定的代码

语法
setTimeout(code,millisec,lang)

参数	描述
code	必需。要调用的函数后要执行的 JavaScript 代码串。
millisec	必需。在执行代码前需等待的毫秒数。
lang	可选。脚本语言可以是：JScript、VBScript、JavaScript

setInterval() 和 setTimeout() 是 Window对象的两个方法。

/*
    定时器：
    setTimeout  只执行一次的定时器 
    clearTimeout 关闭只执行一次的定时器
    setInterval  反复执行的定时器
    clearInterval 关闭反复执行的定时器

*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert('ok!');
}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
</head>
<body>
    <script>

        // 单次定时器 setTimeout(回调函数,制定的等待时间)
        //         指定时间之后执行指定的代码
        //         只执行一次
        var T=setTimeout(function(){
            console.log('一秒之后执行的代码');
        },3000);

        // 多次定时器 setInterval(回调函数,间隔时间)
        //             指定时间后执行一次
        //             一直执行
        var i=0;
        var I=setInterval(function(){
            console.log(i);
            i++;
        },1000);

        // 清除定时器
            // 清除单次定时器 clearTimeout()
                // console.log(T);
                clearTimeout(T)
            // 清除多次定时器 clearInterval()
            setTimeout(function(){
                clearInterval(I);
            },5000);
     </script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组帧动画</title>
</head>
<body>
    <img src="./img/p1.png" alt="" id="Img">
    <script>
        var P=document.getElementById('Img');
        // 获取src属性的值
        // var S=P.src;
        // 设置src属性
        // P.src='./img/p2.png';
        // console.log(S);
        var i=1;

        // 启动多次定时器
        var I=setInterval(function(){
            // 拼接图片的路径 间隔300毫秒换一张图片
            P.src='./img/p'+i+'.png';
            i++;
            if(i==6){
                clearInterval(I);
                // i=1;
            }
        },300)
    </script>
</body>
</html>

scralet-moon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js定时器

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。定时器在javascript中的作用1、制作动画2、异步操作3、函数缓冲与节流定时器类型及语法setInterval() - 间隔指定的毫秒数不停地执行指定的代码。语法 setInterval(code,milli...
复制链接

扫一扫