js 中定时器的写法

最新推荐文章于 2024-05-31 08:30:00 发布

Hi_JohnsonYu

最新推荐文章于 2024-05-31 08:30:00 发布

阅读量4.2k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/yuqixiansheng/article/details/52169255

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在js 中定时一般会用到setTimeout 和 setInterval 函数.其中setTimeout 只能运行一次,只有在处理函数里面再嵌套一个setTimeout才能完成不断的调用,从而实现定时功能,这比较繁琐,还是用setInterval吧.

下面是一个setInterval的代码例子:

<html>

    <head>
            <meta charset='utf-8'>
            <title>js  setInterval 定时器</title>
            <style>
                div{
                    width:200px;
                    height:100px;
                    border:1px red solid;
                    color:blue;
                    font-size:20px;
                    display:flex;
                    justify-content:center;
                    align-items:center;
                }

            </style>
    </head>


    <body>
        <div id = 'msg'>
                需要支持flex box 的浏览器
                <script>

                    function $(id)
                    {
                        return document.getElementById(id);
                    }

                    var i = 0
                    var m = 1
                    var sum = 0;
                    var tid = setInterval(function(){

                        $('msg').innerText = i

                        i = i + m

                        if(i % 10 == 0)
                        {
                            m = -1
                            sum ++
                        }

                        if(i == 0)
                            m = 1


                        if (sum == 2)
                        {
                            clearInterval(tid);
                        }

                    },1000)//这里即使是不设置1000,或给0值 也会运行一次

            </script>
        </div>
    </body>
</html>

同时要注意js 是单线程的语言,只能被其它线程调用.setInterval 和 setTimeout 也不能构成多线程. 这两个方法表示将要执行的任务,加入到主线程的队列中,等前面的的线程队列中的任务执行完成了,才会执行定时器中的任务.

Hi_JohnsonYu

关注

0
点赞
踩
0

收藏

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

在js 中定时一般会用到setTimeout 和 setInterval 函数.其中setTimeout 只能运行一次,只有在处理函数里面再嵌套一个setTimeout才能完成不断的调用,从而实现定时功能,这比较繁琐,还是用setInterval吧.下面是一个setInterval的代码例子:<html> <head> <meta charset='utf-8'>
复制链接

扫一扫

专栏目录