setTimeout的疑虑？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="btn">按我倒计时</button>
<script>
    var oBtn = document.getElementById('btn');
    var sec = 60;
    oBtn.onclick = function(){
        for(var i =0;i<sec;i++){
            var timer = setTimeout(function(){
                if(sec!=0){
                    oBtn.innerText = '重新发送（'+sec+')';
                    sec--;
                }else{
                    sec = 60;
                    oBtn.innerText = '按我倒计时'
 }
            },1000)
        }
    }
</script>
</body>
</html>

目的是想点击按钮，按钮开始60s的倒计时，每隔一秒数字减一，但是我上面的代码按一下，过了一秒，数字直接变成了1，这是什么原因呢？我是这么分析的，当v=0时，隔了1s，文字内容变成'重新发送（60）'，执行完之后v=1,隔了1s，文字内容变成‘重新发送（59）’...但就是不对，望大神指明。

好学的Lv

浏览 1058回答 1

1回答

Caballarii

for循环一瞬间就执行完了，不会在那里等你的。这段代码逻辑混乱。oBtn.onclick = function(){ function func(){ if(sec!=0){ oBtn.innerText = '重新发送（'+sec+')'; sec--; setTimeout(func,1000); }else{ sec = 60; oBtn.innerText = '按我倒计时' } } func(); }

随时随地看视频慕课网APP