Таймер события щелчка JavaScript работает быстро

Вы можете проверить все мои коды на страницах github с помощью этого Ссылка на сайт

Я делаю функцию таймера, и это выглядит так.

function timer() {

    seconds += 1;
    $(".timer").html(seconds);
    timerPrint = setTimeout(timer, 1000);
    console.info(seconds);
}

Каждую секунду будет отсчитываться одна секунда.

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

$(document).ready(function () {

    let clickhold = [];
    $('.card').click(function () {
        timer();

        $(this).addClass('disable');
        // Push the card to compare each other
        clickhold.push($(this).children('.fa').attr('class'));
        console.info(clickhold);

        // Card Open
        $(this).addClass("open show");
        if (clickhold.length == 2) {
            // Call moves Function to count move and stars.
            moves();
            $('.card').addClass('disable');
            if (clickhold[0] === clickhold[1]) {
                $('.open.show').removeClass("open show").addClass("match");
                console.info('matched');
                clickhold = [];
                $('.card').removeClass('disable');
            } else {
                console.info('not matched');
                clickhold = [];
                let ele = $('.card');
                setTimeout(function () {
                    ele.removeClass("open show");
                    $('.card').removeClass('disable');
                }, 1000);

            }
        }
    })
});

Но проблема в том, что когда я нажимаю каждый элемент li. Функция таймера будет вызвана снова, поэтому счетчик будет работать быстрее. Не каждую 1 секунду. Но я понятия не имею об этом.

Почему бы вам не сбрасывать таймер при каждом нажатии?

16kb 17.08.2018 04:41

Также вы можете изучить функцию setInterval.

John Hascall 17.08.2018 07:06
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
105
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просто проверьте, существует ли уже таймер, и если он есть, просто верните:

function timer() {
    if (timerPrint) {
        return;
    }
    seconds += 1;
    $(".timer").html(seconds);
    timerPrint = setTimeout(timer, 1000);
    console.info(seconds);
}

Другие вопросы по теме