Question

嘿伙计们，当你点击一个按钮（它启动一个视频并混合）时，我会有一个代码从一个状态变为另一个状态。现在我尝试说我的事件处理程序，如果有人点击非常快，他不应该使用它作为输入。像= Eventhandler之类的东西请注意一下只需一次点击。希望这是我的代码：

<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>

Answer 1

您可以在单击按钮时禁用该按钮，然后设置超时以在一秒钟后重新启用它。

喜欢这个

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

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

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

此处示例：

maktaba

我在这里使用了一些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.log("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.log("doing stuff");

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

});

}）;

Answer 2

您可以在点击时添加eventlistener并使用它创建计时器

例如，在用户点击按钮后，我们启动1000ms计时器，如果在此时间间隔内单击按钮，我们将显示警报。

Symfony 2.8

Javascript“不要将状态更改为快速”

2 个答案: