专栏首页前端博客:https://alili.techJS基础入门篇(十三)—定时器

抱歉,你查看的文章已删除

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

1.定时器

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

2.定时器-setInterval

定时器-setInterval基本定义

  • setInterval 间隔型定时器:每隔一段时间执行一段代码。 注意:代码一般会重复执行
  • 语法 setInterval(函数,时间间隔); eg: setInterval(fn,20);指的是每隔20 毫秒执行一段函数 时间间隔的单位 : 是毫秒(ms)1s = 1000ms
  • 返回值 setInterval(重复执行的代码,时间间隔);这段代码的返回值是分配定时器一个独有的编号。这个编号跟关闭定时器有关。当你开启很多定时器的时候,你想关闭哪一个定时器,就需要知道对应的编号然后关闭。就是每开启一个定时器,会给这个定时器贴一个编号,编号是数字类型的,会由这段代码的返回值传递出编码。

使用举例1—无参函数

 <script>
        //方式一:函数为匿名函数
        setInterval(function () {
            console.log(1);
        },1000);
        //方式二:有名函数-part1
        function fn() {
            console.log(2);
        }
        setInterval(fn,1000);
        //方式二:有名函数-part2
        function go() {
            console.log(3);
        }
        setInterval("go()",1000);
 </script>

使用举例2—有参函数

<script>
        //方式一:有名函数的传参
        function  fn(a,b) {
            console.log(a,b);
        }
        setInterval("fn('c','d')",1000);
        //方式二:匿名函数的传参
        setInterval(function(a,b,c){
            console.log(a,b,c);
        },1000,"a","b","c");
</script>

注意:

<script>
        //以下代码只是开了一个定时器,会在1s之后执行这个函数。
        setInterval(function(){
          console.log(1);
        },1000);
        console.log(222);
        console.log(333);
</script>

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

3.setInterval—轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width:400px;
            height:400px;
            border:2px solid black;
            background: red;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    data=["red","blue","yellow","pink"];
    var box=document.getElementById("box");
    var num=0;
    var L=data.length;
    setInterval(function () {
        num++;
        //L%num的结果永远会小于L,并且是0,1,2,····L-1这样循环的。
        num%=L;
        box.style.backgroundColor=data[num];

    },1000);
</script>
</body>
</html>

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

4.setInterval—轮播图的停止

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

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

<body>
<div id="box"></div>
<button id="stop">停止播放</button>
<script>
    data=["red","blue","yellow","pink"];
    var box=document.getElementById("box");
    var stop=document.getElementById("stop");
    var num=0;
    var step=1;
    var L=data.length;
    setInterval(function () {
        //通过step来控制颜色的转化。
        num+=step;
        num%=L;
        box.style.backgroundColor=data[num];
        //可以从 console.log(1)看出定时器没关闭,就算停止轮播了,依旧不停的打印1.
        console.log(1);

    },1000);
    stop.onclick=function () {
    //让step为0,图片就停止在那个地方。但是定时器没关。
        step=0;
    };
</script>
</body>
</html>

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

<body>
<div id="box"></div>
<button id="stop">停止播放</button>
<script>
    data=["red","blue","yellow","pink"];
    var box=document.getElementById("box");
    var stop=document.getElementById("stop");
    var num=0;
    //默认为true。
    var onoff=true;
    var L=data.length;
    setInterval(function () {
        //button点击之后,onoff为false,则无法执行
        if(onoff) {
            num++;
            num %= L;
            box.style.backgroundColor = data[num];
        }
        console.log(1);

    },1000);
    stop.onclick=function () {
        //点击之后为false。
        onoff=false;
    };
</script>
</body>
</html>

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

<body>
<div id="box"></div>
<button id="stop">停止播放</button>
<script>
    data=["red","blue","yellow","pink"];
    var box=document.getElementById("box");
    var stop=document.getElementById("stop");
    var num=0;
    var L=data.length;
    //setInterval()方法返回的是定时器的编号。这个编号是独有的。
    var timer=setInterval(function () {
            num++;
            num %= L;
            box.style.backgroundColor = data[num];
        console.log(1);

    },1000);
    stop.onclick=function () {
        //clearInterval(),通过传入定时器的编号来。关闭定时器
        clearInterval(timer);
    };
</script>
</body>
</html>

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width:400px;
            height:400px;
            border:2px solid black;
            background: red;
        }
        button{
            width: 100px;
            line-height: 50px;
            background: cornflowerblue;
            color: #fff;
            font-size: 20px;
            border:none;
            margin-top: 10px;
            outline: none;
        }
    </style>
</head>
<body>
<div id="box"></div>
<button id="stop">停止播放</button>
<button id="star">开始播放</button>
<script>
    data=["red","blue","yellow","pink"];
    var box=document.getElementById("box");
    var stop=document.getElementById("stop");
    var star=document.getElementById("star");
    var num=0;
    var L=data.length;
    function move() {
        num++;
        num %= L;
        box.style.backgroundColor = data[num];
    };
    var timer=setInterval(move,1000);
    stop.onclick=function () {
        //clearInterval(),通过传入定时器的编号来。关闭定时器
        clearInterval(timer);
    };
    star.onclick=function () {
        //每次开启定时器的时候,先清除前一个定时器。因为当用户重复点击开始按钮,就会打开多个定时器。
        //所以,每次打开定时器,先清除前一个。
        clearInterval(timer);
        timer=setInterval(move,1000);
    }
</script>
</body>
</html>

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

<div id="box"></div>
<button id="stop">停止播放</button>
<button id="star">开始播放</button>
<script>
    data=["red","blue","yellow","pink"];
    var box=document.getElementById("box");
    var stop=document.getElementById("stop");
    var star=document.getElementById("star");
    var num=0;
    var L=data.length;
    var step=1;
    function move() {
        num+=step;
        num %= L;
        box.style.backgroundColor = data[num];
    };
   setInterval(move,1000);
    stop.onclick=function () {
        //停止按钮,step=0
        step=0;
    };
    star.onclick=function () {
        //开始按钮,step=1
        step=1;
    }
</script>

方式三:使用变量重新开始定时器 使用变量重新开始定时器点击预览

<body>
<div id="box"></div>
<button id="stop">停止播放</button>
<button id="star">开始播放</button>
<script>
    data=["red","blue","yellow","pink"];
    var box=document.getElementById("box");
    var stop=document.getElementById("stop");
    var star=document.getElementById("star");
    var num=0;
    var L=data.length;
    var isPlay=true;
    function move() {
        num++;
        num %= L;
        box.style.backgroundColor = data[num];
    };
    var timer=setInterval(move,1000);
    stop.onclick=function () {
        clearInterval(timer);
        isPlay=false;
    };
    star.onclick=function () {
        if(!isPlay){//没有在播放就开始定时器
            timer=setInterval(move,1000);
        }
        isPlay=true;//改变状态
    }
</script>
</body>

6.定时器-setTimeout

定时器-setTimeout基本定义

  • 延迟型定时器 隔一段时间执行一段代码(执行一次)
  • 语法: setTimeout(函数,时间间隔) 比如setTimeout(fn,20) 隔(等待)20 毫秒执行一段函数 时间间隔的单位 :是毫秒(ms) 1s = 1000ms
  • 返回值:定时器唯一的编号
  • 注意:虽然只执行一次,就不执行了。但是还是要关闭定时器,不然会消耗性能。

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

<script>
    //隔一秒页面会弹出Hello。
    var timer = setTimeout( function(){
        alert("Hello");
    },1000 );
    //点击页面任何一个位置关闭定时器。
    document.onclick = function(){
        clearTimeout( timer );
    }
</script>

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

<script>
    var timer = 0; 
    function fn(){
        timer = setTimeout( function(){
            console.log(1);
            //继续调用fn,则在控制台还会打印1。
            fn();
        },1000 )
    }
    fn();
    
    document.onclick = function(){
        clearTimeout( timer )
    }
</script>

版权声明

本文资源来源互联网,仅供学习研究使用,版权归该资源的合法拥有者所有,

本文仅用于学习、研究和交流目的。转载请注明出处、完整链接以及原作者。

原作者若认为本站侵犯了您的版权,请联系我们,我们会立即删除!

原文标题

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

原文链接

https://segmentfault.com/a/1190000015044298

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ICN:SDN后的下一个热潮

    编者按:SDN和NFV已逐渐歩入正轨,而继SDN的后浪就是ICN。ICN打破以主机为中心的连接方式,变成以信息为中心的模式,建立一个更加安全、可扩展、灵活的网络...

    SDNLAB
  • Android 创建与解析XML(三)—— Sax方式

    SAX是一种占用内存少且解析速度快的解析器,它采用的是事件启动,不需要解析完整个文档,而是按照内容顺序看文档某个部分是否符合xml语法,如果符合就触发相应的事件...

    阳光岛主
  • ThingJS结合Web地图API开发,让数据展示更加出色!

    三维地图,是为了更好的数据可视化,以便更好地进行数据分析。ThingJS结合Web地图API开发了更多3D功能,让数据展示更加出色!

    森友鹿锘
  • Mysql运行模式及1690错误处理

    经过查询,发现这个错误的原因是两个时间字段进行减法运算时,如果有一个时间为0000-00-00时造成的,根本原因是因为这样减法的结果会超过Mysql数值字段的范...

    大江小浪
  • C/C++ 遇到0xcccccccc访问冲突

    最近一直在纠结这个问题. ? 最近写代码,总是遇到这个问题,一旦遇到这个问题,以前好使的代码也就不好使了。很费解,上网搜集了下资料.... 这个0xcccccc...

    用户1154259

扫码关注云+社区

领取腾讯云代金券