定时器之一个有意思的问题，感兴趣的可以解答一下


下面是一段完整的代码，其中写了两个定时器，时间的输出不一样，btn按钮可以显示0秒，btn2不显示0秒（代码逻辑上应该是显示0秒）。btn2按照常理是正确的，倒计时完后值直接变成同意。路过的大神，感兴趣的话，可以解答一下。非常感谢！<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var time = 5;
            var timeId = setInterval(function () {
                if (time <= 0) {
                    //清除定时器
                    clearInterval(timeId);
                    //设置为可点击状态
                    document.getElementById("btn").disabled=false;
                    //更改按钮值为同意
                    document.getElementById("btn").value="同意";                } else {
                    time--;
                    document.getElementById("btn").value = "请仔细阅读协议("+ time +")";
                }
            }, 1000);
        };
    </script>
</head>
<body>
    <textarea id="text" cols="30" rows="10">曾经沧海难为水，除却巫山不是云</textarea>
    <!--<button type="button" id="btn" disabled="disabled">请仔细阅读协议(5)</button>-->    <input type="button" id="btn" disabled="disabled" value="请仔细阅读协议(5)"/>
    <input type="button" id="btn2" disabled="disabled" value="请仔细阅读协议哦(5)"/>
</body>    <script>
        var times = 5;
        var tinesId = setInterval(function () {
            //进入定时器先执行时间自减
            times--;
            //按钮时间数字变化
            document.getElementById("btn2").value = "请仔细阅读协议哦("+ times +")";
            if (times <= 0){
                //清除定时器
                clearInterval(tinesId);
                //设置状态为可点击状态
                document.getElementById("btn2").disabled=false;
                //更改按钮的值
                document.getElementById("btn2").value="同意";
            }
        },1000);
    </script>
</html>

解决方案 »

  1.   

    调用顺序问题，给你改下顺序就好了<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            window.onload = function () {
                var time = 5;
                var timeId = setInterval(function () {
                    if (time <= 0) {
                        //清除定时器
                        clearInterval(timeId);
                        //设置为可点击状态
                        document.getElementById("btn").disabled=false;
                        //更改按钮值为同意
                        document.getElementById("btn").value="同意";                } else {
                        time--;
                        document.getElementById("btn").value = "请仔细阅读协议("+ time +")";
                    }
                }, 1000);
            };
        </script>
    </head>
    <body>
        <textarea id="text" cols="30" rows="10">曾经沧海难为水，除却巫山不是云</textarea>
        <!--<button type="button" id="btn" disabled="disabled">请仔细阅读协议(5)</button>-->    <input type="button" id="btn" disabled="disabled" value="请仔细阅读协议(5)"/>
        <input type="button" id="btn2" disabled="disabled" value="请仔细阅读协议哦(5)"/>
    </body>    <script>
            var times = 5;
            var tinesId = setInterval(function () {
    if (times <= 0){
                    //清除定时器
                    clearInterval(tinesId);
                    //设置状态为可点击状态
                    document.getElementById("btn2").disabled=false;
                    //更改按钮的值
                    document.getElementById("btn2").value="同意";
                }else{
    //进入定时器先执行时间自减
    times--;
    //按钮时间数字变化
    document.getElementById("btn2").value = "请仔细阅读协议哦("+ times +")";
    }      
            },1000);
        </script>
    </html>
      

  2.   

    一个是先判断再 --  ； 一个是先 -- 再判断；
    逻辑很简单，先判断当times=1时，执行 -- ，然后赋值，就有0 出现1秒；
    先-- 的话，当times -- 后等于0 时，马上就变成了同意,所以看不到0；
      

  3.   


    设置的代码在--之后，
    times--;
    //按钮时间数字变化
    document.getElementById("btn2").value = "请仔细阅读协议哦("+ times +")";
    理论上 ，如果times自减完后，下一步就设值应该就会输出0的，我的疑惑是这一点
      

  4.   


    嗯嗯，这么问题的解决方法有很多，一个可以都是显示0，一个让
    var timeId = setInterval(function () {
                    if (time <= 0) {
                        //清除定时器
    将 time <= 0 改成time <= 1 即可。
     
    我疑惑的是第二个问题，可以参考下2楼
    设置的代码在--之后，
    times--;
    //按钮时间数字变化
    document.getElementById("btn2").value = "请仔细阅读协议哦("+ times +")";
    理论上 ，如果times自减完后，下一步就设值应该就会输出0的，我的疑惑是这一点
      

  5.   

    我给你打了log之后 ，看输出，time等于0时，是执行了。
    只不过
    document.getElementById("btn2").value = "请仔细阅读协议哦("+ times +")";
    document.getElementById("btn2").value="同意";
    上面两个代码执行间隔在微秒之间，导致你肉眼分辨不出，所以你以为“请仔细阅读协议哦”是没执行的。
    、
    <script>
            var times = 5;
            var tinesId = setInterval(function () {
    //进入定时器先执行时间自减
    times--;
    //按钮时间数字变化
    console.log(new Date());
    document.getElementById("btn2").value = "请仔细阅读协议哦("+ times +")";
    console.log(times);
    if (times <= 0){
                    //清除定时器
                    clearInterval(tinesId);
                    //设置状态为可点击状态
                    document.getElementById("btn2").disabled=false;
                    //更改按钮的值
    console.log(new Date())
                    document.getElementById("btn2").value="同意";
                }       
            },1000);
        </script>
      

  6.   


    设置的代码在--之后，
    times--;
    //按钮时间数字变化
    document.getElementById("btn2").value = "请仔细阅读协议哦("+ times +")";
    理论上 ，如果times自减完后，下一步就设值应该就会输出0的，我的疑惑是这一点
    是会有0出现，不过代码执行的速度很快，你还没看到0， 立马执行到下面判断语句里面就改成了“同意”了，第一种情况是定时器的原因1秒后才变，所以看得到，第二种情况中间没有那个1秒，所以看不到0
      

  7.   

    我给你打了log之后 ，看输出，time等于0时，是执行了。
    只不过
    document.getElementById("btn2").value = "请仔细阅读协议哦("+ times +")";
    document.getElementById("btn2").value="同意";
    上面两个代码执行间隔在微秒之间，导致你肉眼分辨不出，所以你以为“请仔细阅读协议哦”是没执行的。
    、
    <script>
            var times = 5;
            var tinesId = setInterval(function () {
    //进入定时器先执行时间自减
    times--;
    //按钮时间数字变化
    console.log(new Date());
    document.getElementById("btn2").value = "请仔细阅读协议哦("+ times +")";
    console.log(times);
    if (times <= 0){
                    //清除定时器
                    clearInterval(tinesId);
                    //设置状态为可点击状态
                    document.getElementById("btn2").disabled=false;
                    //更改按钮的值
    console.log(new Date())
                    document.getElementById("btn2").value="同意";
                }       
            },1000);
        </script>
    明白了，谢谢大神，这个表面上看是正确的，应该算是理论的bug吗？
      

  8.   


    设置的代码在--之后，
    times--;
    //按钮时间数字变化
    document.getElementById("btn2").value = "请仔细阅读协议哦("+ times +")";
    理论上 ，如果times自减完后，下一步就设值应该就会输出0的，我的疑惑是这一点
    是会有0出现，不过代码执行的速度很快，你还没看到0， 立马执行到下面判断语句里面就改成了“同意”了，第一种情况是定时器的原因1秒后才变，所以看得到，第二种情况中间没有那个1秒，所以看不到0谢谢，谢谢，明白了