为什么我的文本框不是每秒显示一个更新值？

Question

我有以下使用 jQuery 1.8.0 的代码。它应该每秒增加文本框中的值，但是当我运行它时没有任何反应。

我已经很长时间没有写任何 JavaScript（我已经习惯了 C++）所以我确定我遗漏了一些明显的东西。 jQuery 是否与 setInterval 函数有某种冲突？我不能在计时器中使用 #timer 选择器吗？

$(function() {
    var i = 0;
    setInterval(1000, function() {
        i++;
        $('#timer').val(i);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<input type="textbox" id="timer" />

Answer 1

你对 setInterval 的论点被颠倒了。改为这样做：

setInterval(function() {
    i++;
    $('#timer').val(i);
}, 1000);

Answer 2

除上述答案外，请注意 setInterval 不一定与实际时间保持同步。也就是说，在 60 次重复之后，实际上可能已经超过（或少于）60 秒。

Answer 3

首先，setInterval 的参数被颠倒了。

$(function() {
    var i = 0;
    setInterval(function() {
        i++;
        $('#timer').val(i);
    }<b>, 1000</b>);
});

其次，您依靠 setInterval 提供可靠的计数。你应该使用单调时钟； performance.now() 在现代浏览器中提供此功能。基于 Date.now() 或 new Date() 的解决方案在调整系统时钟时容易导致意外行为。

$(function () {
    <b>var start = performance.now();</b>

    setInterval(function () {
        <b>var elapsed = (performance.now() - start) / 1000;
        $('#timer').val(Math.floor(elapsed));</b>
    }, 1000);
});

第三，文本框 <input>s 的 type 是 text，而不是 textbox。

<input type="<b>text</b>" id="timer" />

第四，您使用可编辑的文本框来显示不断变化的值，但没有将其用作任何类型的输入。这对用户不友好；尝试使用 <span>，根据需要设置样式。如果需要选择数字，您可能需要暂停计数。

$(function () {
    var start = performance.now();

    setInterval(function () {
        var elapsed = (performance.now() - start) / 1000;
        $('#timer').<b>text</b>(Math.floor(elapsed));
    }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<span id="timer"></span>

第五，您使用的是 jQuery 的过时版本。因为你用的是performance.now()，所以jQuery 2.1.x是正确的，但是第六，根本没有jQuery会更好。

document.addEventListener('DOMContentLoaded', function () {
    var start = performance.now();

    setInterval(function () {
        var elapsed = (performance.now() - start) / 1000;
        <b>document.getElementById('timer').textContent =</b> Math.floor(elapsed);
    }, 1000);
});

您现在可以删除包含 jQuery 的 <script> 元素。这现在揭示了 jQuery 时不那么明显的低效率；您每秒都在查询计时器元素。所以第七：在别处跟踪它。

document.addEventListener('DOMContentLoaded', function () {
    <b>var timer = document.getElementById('timer');</b>
    var start = performance.now();

    setInterval(function () {
        var elapsed = (performance.now() - start) / 1000;
        <b>timer</b>.textContent = Math.floor(elapsed);
    }, 1000);
});

第八，将 <script> 块移动到元素下方，您将不必浪费时间等待 DOMContentLoaded 或键入其事件侦听器。记得也要进入严格模式。

<b>(function () {</b>
    <b>'use strict';</b>

    var timer = document.getElementById('timer');
    var start = performance.now();

    setInterval(function () {
        var elapsed = (performance.now() - start) / 1000;
        timer.textContent = Math.floor(elapsed);
    }, 1000);
<b>})();</b>

<span id="timer"></span>

<b><script src="timer.js" async></script></b>

现在还不错

Answer 4

只需反转setInterval中的参数即可。

setInterval( function() { i++; $('#timer').val(i); }, 1000);

为什么我的文本框不是每秒显示一个更新值？

Why doesn't my textbox show an updated value every second?

javascript

jquery