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反转的论据。

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

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

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

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

第三，文本框type的{{1}}为<input>，而不是text。

textbox

第四，您正在使用可编辑的文本框来显示更改的值，而不将其用作任何类型的输入。这对用户不友好;尝试<input type="text" id="timer" />代替，根据需要设置样式。如果需要选择该号码，您可能希望暂停计数。

<span>

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

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

第五，你使用的是过时的jQuery版本。由于你使用的是<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <span id="timer"></span>，jQuery 2.1.x是正确的，但是第六，没有jQuery会更好。

performance.now()

您现在可以删除包含jQuery的document.addEventListener('DOMContentLoaded', function () { var start = performance.now(); setInterval(function () { var elapsed = (performance.now() - start) / 1000; document.getElementById('timer').textContent = Math.floor(elapsed); }, 1000); });元素。这现在揭示了jQuery不太明显的低效率;你每秒都在查询计时器元素。第七：跟踪其他地方。

<script>

第八，将document.addEventListener('DOMContentLoaded', function () { var timer = document.getElementById('timer'); var start = performance.now(); setInterval(function () { var elapsed = (performance.now() - start) / 1000; timer.textContent = Math.floor(elapsed); }, 1000); });块移到元素下方，您不必浪费时间等待<script>或键入其事件监听器。记住也要处于严格模式。

DOMContentLoaded

(function () {
    'use strict';

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

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

现在很不错。

Answer 3

除了上面的答案，请注意setInterval不一定与实际时间保持同步。也就是说，经过60次重复后，实际上可能已经过了60秒甚至更多（或更少）。

Answer 4

只需反转setInterval中的参数。

setInterval（function（）{ 我++; $（ '＃计时器'）VAL（我）。 }，1000）;

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

4 个答案: