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

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。

\n\n

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

\n\n

其次，您\xe2\x80\x99 依赖于setInterval提供可靠的计数。你应该使用单调时钟；performance.now()在现代浏览器中提供了这一点。当系统时钟调整时，基于Date.now()或new Date()容易导致不良行为的解决方案。

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

第五，您\xe2\x80\x99 使用的是过时版本的 jQuery。由于您\xe2\x80\x99正在使用performance.now()，jQuery 2.1.x 是正确的，但第六，根本没有 jQuery 会更好。

\n\n

document.addEventListener(\'DOMContentLoaded\', function () {\n    var start = performance.now();\n\n    setInterval(function () {\n        var elapsed = (performance.now() - start) / 1000;\n        document.getElementById(\'timer\').textContent = Math.floor(elapsed);\n    }, 1000);\n});

\n\n

您现在可以删除<script>包含 jQuery 的元素。现在这揭示了 jQuery 中不太明显的低效率问题；你\xe2\x80\x99每秒都会查询计时器元素。第七：在其他地方跟踪它。

\n\n

document.addEventListener(\'DOMContentLoaded\', function () {\n    var timer = document.getElementById(\'timer\');\n    var start = performance.now();\n\n    setInterval(function () {\n        var elapsed = (performance.now() - start) / 1000;\n        timer.textContent = Math.floor(elapsed);\n    }, 1000);\n});

\n\n

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

\n\n

(function () {\n    \'use strict\';\n\n    var timer = document.getElementById(\'timer\');\n    var start = performance.now();\n\n    setInterval(function () {\n        var elapsed = (performance.now() - start) / 1000;\n        timer.textContent = Math.floor(elapsed);\n    }, 1000);\n})();

\n\n

<span id="timer"></span>\n\n<script src="timer.js" async></script>

\n\n

现在\xe2\x80\x99 还不错。

\n