Javascript «Не меняйте состояние на быстрое»

Привет, ребята, у меня есть код, который переключается из одного состояния в другое, когда вы нажимаете кнопку (он запускает видео и смешивается). Теперь я пытаюсь сказать свой обработчик событий, если кто-то нажимает очень быстро, он не должен использовать его в качестве ввода. Что-то вроде = Обработчик событий, пожалуйста, обратите внимание всего на один щелчок за одну секунду. Надеюсь, здесь мой код понятен:

<script>
    var clickState = 0;
    var btn = document.querySelector('#playbutton');

    btn.addEventListener('click', function(){

    if (clickState == 0) {
    document.querySelector('#toggler').emit('fade_1');

    var videoEl_1 = document.querySelector('#video');

    videoEl_1.play();
    document.querySelector( "#skyid" ).emit('fade_1');
    clickState = 1;

    } else {

    document.querySelector('#toggler').emit('fade_2');

    var videoEl_1 = document.querySelector('#video');

    videoEl_1.pause();
    document.querySelector( "#skyid" ).emit('fade_2');
    clickState = 0;
      }
    });
</script>
Поведение ключевого слова "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
0
28
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Вы можете отключить кнопку при ее нажатии, а затем установить тайм-аут, чтобы снова включить ее через секунду.

Как это

$( document ).ready(function() {
    $("#myButton").click(function(){
        // disable the button
        $("#myButton").prop("disabled", true);

        //do the things you want the button to do:
        console.info("doing stuff");

        // reenable the button after 1 second
        setTimeout(function(){
            $("#myButton").prop("disabled", false);
        }, 1000);
    });
});

Пример здесь:

https://jsfiddle.net/20n1gb89/8/

Я использовал здесь jQuery, но setTimeout - это собственный JavaScript

редактировать:

Кажется, вы определяете обработчик щелчка внутри обработчика щелчка для той же кнопки. Смотрите мои комментарии. Удалите btn.addEventListener и просто сохраните оператор if else. Посмотрим, работает ли это.

 $(document).ready(function () {
        // here you define a click handler for playbutton
        $("#playbutton").click(function () {
            // disable the button
            $("#playbutton").prop("disabled", true);

            //do the things you want the button to do:
            var clickState = 0;
            var btn = document.querySelector('#playbutton');

            // here you define a click handler for the same button 
            // inside the first click handler. You shouldn't do that.
            btn.addEventListener('click', function () {
                if (clickState == 0) {
                    document.querySelector('#toggler').emit('fade_1');

                    var videoEl_1 = document.querySelector('#video');

                    videoEl_1.play();
                    document.querySelector("#skyid").emit('fade_1');
                    clickState = 1;
                } else {
                    document.querySelector('#toggler').emit('fade_2');

                    var videoEl_1 = document.querySelector('#video');

                    videoEl_1.pause();
                    document.querySelector("#skyid").emit('fade_2');
                    clickState = 0;
                }

                console.info("doing stuff");

                // reenable the button after 1 second
                setTimeout(function () {
                    $("#playbutton").prop("disabled", false);
                }, 2000);
            });

        });
    });

редактировать 2:

Это. Попробуй это:

$(document).ready(function () {
    $("#playbutton").click(function () {
        // disable the button
        $("#playbutton").prop("disabled", true);

        //do the things you want the button to do:

        var clickState = 0;

        // this doesn't really make sense. clickState will always be 0 
        // as it is defined as 0 each time you click the button. You 
        // will need to define clickState outside the click handler 
        // for this to work.
        if (clickState == 0) {
            document.querySelector('#toggler').emit('fade_1');

            var videoEl_1 = document.querySelector('#video');

            videoEl_1.play();
            document.querySelector("#skyid").emit('fade_1');
            clickState = 1;
        } else {
           document.querySelector('#toggler').emit('fade_2');

            var videoEl_1 = document.querySelector('#video');

            videoEl_1.pause();
            document.querySelector("#skyid").emit('fade_2');
            clickState = 0;
        }

        console.info("doing stuff");

        // reenable the button after 1 second
        setTimeout(function () {
            $("#playbutton").prop("disabled", false);
        }, 2000);
    });

});

});

хм, я попытался вставить свой код в `делаю вещи *, но он хочет, чтобы он работал правильно, какая-то идея?

Delidragon 14.06.2018 14:32

ошибок нет вроде работает немного. вы не можете нажимать быстро, но и первый щелчок не будет замечен, и иногда его все еще можно щелкнуть до истечения тайм-аута

Delidragon 14.06.2018 14:41

он работает, но не постоянно, это немного сбивает с толку, как когда вы нажимаете 5 раз или что-то, что он прыгает thx fpr, помощь мне в порядке с этим результатом, я не думаю, что кто-то нажимает это 5 раз очень быстро подряд

Delidragon 14.06.2018 15:20

теперь все в порядке :) может мне просто нужно было удалить кеш или что-то большое спасибо

Delidragon 14.06.2018 15:23

Вы можете добавить прослушиватель событий по щелчку и создать с его помощью таймер

например, здесь после того, как пользователь нажимает кнопку, мы запускаем таймер на 1000 мс, если кнопка нажата в течение этого временного интервала, мы отобразим предупреждение.

 var btn = document.querySelector('#playbutton');
 btn.addEventListener('click', function(){
       setTimeout(function(){
             if (btn.clicked == true){
                  alert("Cmon dude, chill a little");
             }
       }, 1000);
 });

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