Почему мое текстовое поле не обновляет значение каждую секунду?

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.

$(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 для текстового поля <input> s является 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); 
});

<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; 
     document.getElementById('timer').textContent = Math.floor(elapsed); 
    }, 1000); 
});

Теперь вы можете удалить элемент, содержащий jQuery. Теперь это показывает неэффективность, которая была менее очевидна при использовании jQuery; вы запрашиваете элемент таймера каждую секунду. Итак, седьмой: отслеживайте это в другом месте.

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); 
})();

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

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

Теперь это порядочный.

Answer 2

Ваши аргументы setInterval перепутаны. Сделайте это вместо того, чтобы:

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

Answer 3

В дополнение к ответу выше отметить, что setInterval не обязательно оставаться в синхронизации с реальным временем. т.е. после 60 повторений значительно больше (или меньше), чем 60 секунд, возможно, действительно прошло.

Answer 4

Просто измените аргументы в setInterval.

setInterval (функция() { я ++; $ ('# таймер') вал (я). }, 1000);