js 中定时器的写法

来源：互联网发布：java报空指针错误编辑：程序博客网时间：2024/05/17 03:12

在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 也不能构成多线程. 这两个方法表示将要执行的任务,加入到主线程的队列中,等前面的的线程队列中的任务执行完成了,才会执行定时器中的任务.

0 0