DOM初探（13）——JS定时器

JS定时器：

setInterval();
setTimeout();
clearInterval();
clearInterval();
全局对象window上的方法，内部函数this指向window
注意:setInterval("func()",1000)；//可以有另一种形式展现

setInterval();

setInterval(function () {
                console.log("123");
            },1000)

每隔1000毫秒执行一次function。（function不用写名字，写了名字也没用）

这样也好使：

var time = 1000;
            setInterval(function () {
                console.log("123");
            },time)

但是，你要是在下面把time改成2000的话，是没有用的，如：

var time = 1000;
            setInterval(function () {
                console.log("123");
            },time)
            time = 2000;

程序还是按照1000毫秒来执行，setInterval只识别一次时间！！

这个setIntarval()是非常不准确的，不信你看：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <script type="text/javascript">
            var firstTime = new Date().getTime();
            setInterval(function () {
                var lastTime = new Date().getTime();
                console.log(lastTime - firstTime);
                firstTime = lastTime;
            },1000)
        </script>
    </body>
</html>

那，这个setInterval()能不能规定个时间让他听下来呢？

这个setInterval()，是window上的方法，所以我们在全局上，就算我们不window.他也会上Go里面去找，然后这个setInterval()会返回一个东西

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <script type="text/javascript">
            var timer = setInterval(function () {
                
            },1000)
            var timer2 = setInterval(function () {
                
            },1000)
        </script>
    </body>
</html>

每一个setInterval()都会返回一个数字作为他的唯一标识，有了这个唯一标识之后，我们就可以根据这个唯一标识，我们就可以把他清除掉。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <script type="text/javascript">
        var i = 0;
            var timer = setInterval(function () {
                console.log(i ++);
                if(i > 10){
                    clearInterval(timer);
                }
            },10)
            
        </script>
    </body>
</html>

所以，你要是写计时器的话，前面一定得写个东西来接收他的返回值。

setTimeout()：

推迟一段时间执行一次函数。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <script type="text/javascript">
            setTimeout(function () {
                console.log("123");
            },1000)
        </script>
    </body>
</html>

setInterval()和setTimeou()的返回值一定不同，都是依次返回数字，如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
    </head>
    <body>
        <script type="text/javascript">
            var timer = setInterval(function(){
                
            },1000)
            var timer2 = setTimeout(function () {
                
            },1000)
        </script>
    </body>
</html>

setInterval()和setTimeout()的另一种展现形式：

setInterval("",1000);在字符串里面你可以写一些东西，他会当成js代码实现。

练习38：
计时器，到三分钟停止。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>abraham</title>
        <style>
            input{
                border: 1px solid rgba(0,0,0,0.8);
                text-align: right;
                font-size: 15px;
                font-weight: bolder;
            }
        </style>
    </head>
    <body>
        minutes:<input type="text" value="0">
        seconds:<input type="text" value="0">
        <script type="text/javascript">
            var minutesNode = document.getElementsByTagName("input")[0];
            var secondsNode = document.getElementsByTagName("input")[1];
            var minutes = 0;
            var seconds = 0;
            var timer = setInterval(function () {
                seconds ++;
                if(seconds == 60){
                    seconds = 0;
                    minutes ++;
                }
                secondsNode.value = seconds;
                minutesNode.value = minutes;
                if(minutes == 3){
                    clearInterval(timer);
                }
            },1000)
        </script>
    </body>
</html>

DOM初探（13）——JS定时器

猜你喜欢