Question

您好我们可以将setInterval更改为setTimeout函数，它工作正常我想知道它可以用setTimeout完成吗

<head>
<script type="text/javascript">
$(function() {
    var current = $('#counter').text();
    var endvalue = 50
    $('a').click(function() {
        setInterval(function() {
            if (current === endvalue) {

            } else {
                current++;
                $('#counter').text(current)
            }
        }, 50)
    })
})
</script>
</head>
<body>
<div id="counter">0</div>
<a href="#">Click</a>
</body>

Answer 1

使用函数包含setTimeout，并在函数

中调用它

$(function() {
    var current = $('#counter').text();
    var endvalue = 50;

    function timeoutVersion() {
        if (current === endvalue) {return false;} else {
            current++;
            $('#counter').text(current);
        }
        setTimeout(timeoutVersion, 50);
    }

    $('a').click(function() {
        timeoutVersion();
    })
})

Live Demo | Source

然而，在完成setInterval之后用clearInterval清除它会更好：

$(function() {
    var current = $('#counter').text();
    var endvalue = 50
    $('a').click(function() {
        var storedInterval = setInterval(function() {
            if (current === endvalue) {
                clearInterval(storedInterval);
            } else {
                current++;
                $('#counter').text(current)
            }
        }, 50)
    })
})

Live Demo | Source

要回答您的问题 - 是的，您可以使用setInterval更改setTimeout，并对您用于setInterval

的代码进行一些细微更改

Answer 2

使用setInterval()执行函数时，每1000毫秒（等于1秒），无论函数执行多长时间，函数都会每1000毫秒触发一次，而如果你试过要对setTimeout()执行相同操作，如果函数正在执行，比如执行500毫秒，则执行函数之间的总时间间隔将为1500毫秒。

Answer 3

是的，你可以使用setTimeout递归调用相同的函数来获得setInterval的效果。请注意，在setTimeout中，如果以递归方式使用它，则必须手动检查以停止循环。但是setInterval函数返回一个id，你可以使用它调用clearInterval函数来在需要时停止它。

Answer 4

我总是建议setTimeout超过setInterval for reasons better explained by bobince虽然我的回答接近于额外主持人但我不提倡使用间隔只是为了能够清除它。更简单的方法就是在达到目标后不要调用下一个超时

<强> Live Demo

 $(function() {
    var current = $('#counter').text();
    var endvalue = 50;

    function increment() {
        if (current !== endvalue) {
            current++;
            $('#counter').text(current)
            setTimeout(increment, 50);
        }

    }

    $('a').click(function() {
        increment();
    })
});

javascript中的setTimeout vs setInterval

4 个答案: