таймер JavaScript - PullRequest
Новая
       10

таймер JavaScript

1 голос
/ 24 апреля 2011

Я пытаюсь, чтобы следующий таймер JavaScript выполнял две функции одним нажатием одной кнопки - щелчок, как только таймер запускается;нажмите еще раз;это останавливается.нажмите третий раз, чтобы начать снова, и так далее.Что я здесь не так делаю?Заранее большое спасибо. 

    <html>
<head>
    <script type="text/javascript">
        var c=0;
        var t;
        var timer_is_on=0;

        function timedCount()
        {
            document.getElementById('txt').value=c;
            c=c+1;
            t=setTimeout("timedCount()",1000);
        }

        function doTimer()
        {
            if (!timer_is_on)
            {
                timer_is_on=1;
                timedCount();
            }
        }

        function stopCount()
        {
            clearTimeout(t);
            timer_is_on=0;
        }
        function both(){
            doTimer();
            stopCount();
        }
    </script>
</head>

<body>
    <form>
        <input type="button" value="Start count!" onclick="doTimer" />
        <input type="text" id="txt" />
        <input type="button" value="Stop count!" onclick="stopCount()" />
    </form>
<p>
Click on the "Start count!" button above to start the timer. The input field will count forever, starting at 0. Click on the "Stop count!" button to stop the counting. Click on the "Start count!" button to start the timer again.
</p>
</body>
</html>

Ответы [ 5 ]

6 голосов
/ 24 апреля 2011

Вы не описываете реальную проблему, поэтому я не совсем уверен, что ответить, но вот несколько потенциально полезных замечаний.

Функция timedCount является квазисинхронно-рекурсивной. Это здорово, если вы используете стиль передачи продолжения , но это не обязательно, возможно, немного более запутанно, чем нужно для JavaScript, и будет тратить некоторые ресурсы (фреймы стека) на языки, которые не У него нет хвостовой рекурсивной очистки стека (не знаю, есть ли у JS это или нет).

Поскольку это повторяющееся выполнение функции, вы можете использовать setInterval вместо setTimeout и иметь один повторный вызов функции, который проверяет, следует ли увеличивать и повторно отображать счетчик. ... как то так: 

var c=0;
var timer_is_on=false;

function displayCount() {
    document.getElementById('txt').value=c;
}

function count() {
    if(timer_is_on) {
        c=c+1;
        displayCount();
    }
}

var interval = setInterval(count,1000);

Теперь, чтобы решить однокнопочную часть проблемы. Допустим, есть одна кнопка: 

<input type="button" value="Start count!" onclick="toggle" />

Когда мы щелкаем по нему, мы хотим, чтобы этот атрибут «value» изменился, и мы хотим, чтобы он перевернул переменную timer_is_on. Давайте создадим функцию, которая делает все это: 

function toggle() {
    if(timer_is_on) {
       timer_is_on = false;
       this.value = "Start count!";  // `toggle` is invoked by the button's event handler, so `this` is the button
    } else {
       timer_is_on = true;
       this.value = "Stop count!";
    }                   
}

Итак ... count всегда выполняется каждые 1000 мсек, но он делает все, только если timer_is_on, и независимо от того, является ли timer_is_on true или false, контролируется toggle, который присоединен к нашей кнопке. Я думаю, немного проще.

UPDATE

Что, если бы мы хотели, чтобы не всегда включали функцию count в фоновом режиме? Как отмечает Том Ту, это может означать нагрузку на процессор. Я не уверен, что это измеримый (или что он представляет какие-либо накладные расходы помимо таймера, который браузер, вероятно, запускает для выполнения своих собственных обновлений пользовательского интерфейса), но это может быть важно на некоторых платформах, и, возможно, к нему стоит обратиться.

Пока мы полируем, мне не очень нравится присоединять обработчики событий через атрибуты тегов или помещать переменные в глобальную область / область видимости, если я могу избежать этого, поэтому я, вероятно, оберну все наши соответствующие настройки счетчика / обработка JavaScript внутри одной большой функции setupCounter, а также присоединение функции toggle к событию onclick кнопки ввода с использованием выбора DOM и JavaScript. Вероятно, я бы тоже попытался запускать document.getElementById поиски по одному разу.

Итак, допустим, кнопка ввода имеет идентификатор startstop, но в остальном предполагается аналогичная разметка. Я бы, наверное, сделал что-то вроде этого: 

function setupCounter() { 
    var c=0,
        interval,
        counter_display = document.getElementById('txt'),
        button = document.getElementById('startstop');

    function display_count() {
        counter_display.value = c;
    }

    function count() {
        c=c+1;
        display_count();
    }

    function toggle() {
       if(!interval)
          interval = setInterval(count,1000);
          button.value = "Stop count!";
       else {
          clearInterval(interval);
          interval = false;
          button.value = "Start count!";
       }
    }

    button.onclick = toggle;
}

Затем вы должны вызвать setupCounter либо когда-нибудь в документе после того, как будут объявлены элементы counter_display и starttop, либо назначить его для события window.onload или передать его как-нибудь наподобие jQuery $(document).ready().

3 голосов
/ 01 января 2013

Попробуйте это 

<form name="f1">
<input type="text" id="but" />
<input type="button" value="start" onclick="timer()" />
<input type="button" value="stop" onclick="stoptimer()" />
</form>

<script type="text/javascript">
var count=0;
var x;
function timer(){
x=setTimeout("timer()",1000);
count=count+1;
document.getElementById("but").value=count;
}

function stoptimer(){
clearTimeout(x);
}

</script>
1 голос
/ 24 апреля 2011

вы забыли скобки после doTimer: 

<input type="button" value="Start count!" onclick="doTimer" />
1 голос
/ 24 апреля 2011

Попробуйте этот код: 

var c=0;
var t;
var timer_is_on= false;

function timedCount() {
    document.getElementById('txt').value=c;
    c++;
    if (timer_is_on) {
        t= setTimeout(timedCount,1000);
    }
}

function doTimer() {
    if (!timer_is_on) {
        timer_is_on=true;
        timedCount();
    }
    else {
        clearTimeout(t);
        timer_is_on=false;
    }
}

Прикрепите doTimer() fn к каждой из ваших кнопок.

Пример: http://jsbin.com/onoge4/3

Изменения, которые я сделал: используйте true / false вместо 1 / 0.

0 голосов
/ 24 апреля 2011

  1. JavaScript
    Обратите внимание на использование true и false вместо 1 и 0. 

    var timer_is_on=false;
//..
function doTimer()
{
    if (!timer_is_on)
    {
        timer_is_on=true;
        timedCount();
    }
    else
    {
        timer_is_on=false;
        stopCount();
    }
}

  2. HTML
    Я вижу, что ваша кнопка уже настроена на вызов doTimer() onclick (однако обратите внимание, что вы пропустили скобки): 

    <input type="button" value="Start count!" onclick="doTimer()" />

  3. Изменение текста кнопки
    Сначала присвойте кнопке id: 

    <input type="button" id="toggleTimer" value="Start count!" onclick="doTimer()" />

    Затем измените JS: 

    function doTimer()
{
    if (!timer_is_on)
    {
        timer_is_on=true;
        document.getElementById("toggleTimer").value="Stop count!";
        timedCount();
    }
    else
    {
        timer_is_on=false;
        document.getElementById("toggleTimer").value="Start count!";
        stopCount();
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...