javascript - 每次点击只允许一个操作 JQUERY

Question

可能重复：
只执行一次函数

我有这段代码，我希望 DIV 内框只移动一次，如果我点击一段时间，它就可以工作。

如果我一次点击多次，它将无休止地移动，而不仅仅是一次：/

$(document).ready(function(){
    $(".arrow").click(function(){
        pos = $("#insideframe").css('margin-left');
        pos = (pos.substr(0, 3));
        var posi = parseInt(pos);
        if(posi < -23 ){
            die();
        }else if(posi > -20 ){
            $("#insideframe").animate({
                marginLeft: '-=230'
                }, 800 );
        }
    });
});

我怎样才能让它只触发一次？

Answer 1

您可以在单击事件发生时将数据添加到 div 并在后续单击时检查它。

像这样：

$(document).ready(function(){
    $(".arrow").click(function(){

        //Check here if clicked already and return if so
        if($(this).data('clicked') == 'yes')return;
        $(this).data('clicked', 'yes');

        pos = $("#insideframe").css('margin-left');
        pos = (pos.substr(0, 3));
        var posi = parseInt(pos);
        if(posi < -23 ){
            die();
        }else if(posi > -20 ){
            $("#insideframe").animate({
                marginLeft: '-=230'
                }, 800 );
        }
    });
});

Answer 2

你可以做$(".arrow").one('click', function(){...}。这将使该动作只发生一次，但是当您想允许再次单击时，您必须重新绑定单击。

另请查看此插件。