Как запустить функцию setInterval при щелчке пользователя?

#javascript #timer #setinterval

#javascript #таймер #setinterval

Вопрос:

Я пытаюсь написать таймер JS, который будет запускаться нажатием пользователем кнопки с id = «start».

У меня сам таймер работает корректно, но когда я пытаюсь добавить код для запуска таймера при нажатии кнопки (id = «start») Я нарушаю это и не уверен, почему.

Любая помощь была бы высоко оценена!

Вот JS-код:

     $(document).ready(function(){

    var count = 0;

        $('#start').click(function(){
            setInterval(function(){
                count  ;
                $('#timer').html(count   ' tacos seconds');
            },1000);
        });

    });

1. Тьфу. Только что понял, что забыл ‘$’ в начале. Сейчас редактирую.

2. Это запустит новый таймер интервала при щелчке. Что именно желательно / неправильно? Однако, вероятно, что нескольким таймерам не следует разрешать складываться…

3. Проблема в том, что ваша интервальная функция не запущена или в чем именно проблема?

4. Как я могу удалить этот вопрос? Поскольку оказалось, что это не вопрос?

5. Действия @john k должны быть в разделе «теги». Выбирай … удалить 🙂

Ответ №1:

 $(document).ready(function() {
    $('#start').click((function(container) {
        var interval;
        return function() {
            if(interval) clearInterval(interval);

            var count = 0;

            interval = setInterval(function() {
                count  ;
                $(container).html(count   ' tacos seconds');
            }, 1000);
        };
    })("#timer"));
});

1. Как это поможет решить (неуказанную) проблему? 🙂 (Не то чтобы я был против сокращения области count , если это уместно. В этом случае двойная привязка просто усложняет код для понимания).

2. Обновлено, чтобы предотвратить использование нескольких таймеров и улучшить подсчет.

3. Что касается усложнения, если человек пытается использовать обратные вызовы, а функции anon и асинхронные операции слишком запутанны, ему нужно найти новое хобби / работу.

4. И еще одно обновление. Я действительно проверил это на будущее.

5. Спасибо! На самом деле я изначально пытался удалить этот вопрос, потому что понял, что только что пропустил «$», который нарушал все дело, но этот фрагмент, который вы отправили, помогает мне также исправить проблему с подсчетом. Ценю помощь.

Ответ №2:

 $(document).ready(function() {
  var count = 0;
  var myInterval = null;
  $('#start').click(function(){
      myInterval = setInterval(function(){
        count  ;
        $('#timer').html(count   ' tacos seconds');
      },1000);
  });

});

При настройке вашего setInterval в области действия обработчика щелчков попробуйте присвоить его переменной, чтобы удерживать объявленный интервал на уровне выше. Обычно у меня это всегда срабатывало.

Ответ №3:

Не уверен точно, какова ваша цель, но, возможно, вы хотели бы попробовать что-то вроде этого:

 var startInterveal;
var timerStarted = false;
var count =0;
$(document).ready(function () {
    $('#start').click(function () {
        if (!timerStarted) {
            timerStarted = true;
            count =0;
            $(this).attr('disabled', 'disabled');
            startInterveal = setInterval('tick();', 1000);
        }
    });
});

function tick() {
    count  ;
    $('#timer').html(count   ' tacos seconds');
}

Ответ №4:

Вот 2-й ответ, если вы действительно хотите сойти с ума и получить что-то возобновляемое:

 $(document).ready(function() {
    $('#start').click(overboard("#timer"));
    $('#start2').click(overboard("#timer2"));
});

function overboard(container) {
    var interval;
    return function() {
        if (interval) clearInterval(interval);

        var count = 0;

        interval = setInterval(function() {
            count  ;
            $(container).html(count   ' tacos seconds');
        }, 1000);
    };
}