0

我有以下代码：

var wait = 500;
$(document).on("click",".new_game_list_row",function(event){
        var self = $(this);
        //As the element clicked on has it's data attributes defined
        //Retrieves it when the element is clicked on
        var id_quiz_list = self.data('quizlistId'),
            difficult = self.data('difficult');
            userid = $("#new_game_list_wrap").data('userid');
                setTimeout(function(){
                    $.post("new_game_add.php","userid="+userid+"&id_quiz_list="+id_quiz_list+"&difficult="+difficult,function(data){
                        $answer = data;
                        $("#new_game_list_wrap").fadeOut("slow",function(){
                            self.remove();
                            $("#quiz_list_wrap").append('<div class="quiz_list_row" data-quizlist-id="'+id_quiz_list+'" data-quizlevel-reached="0" '+
                            '><div class="inline list_cell" id="quiz_list_cell_rownew_id1">Quiz '+id_quiz_list+'</div><div '+
                            'class="inline list_cell" id="quiz_list_cell_rownew_id2">Current level: 1</div>');
                            showtrick(id_quiz_list,1);
                        }); 
                    }, "html");  
                }, wait);
    });

我试图用来setTimeout()避免在行上多次点击。我的桌子上满是幽灵条目。

我尝试过延迟，但没有奏效。

任何的想法？

4

3 回答 3

1

乍一看，我没有看到任何地方都定义了“等待”，它需要是一个毫秒整数值。除此之外，可能还有更好的方法，例如当点击事件立即关闭绑定，然后使用您的 setTimeout 在 n 毫秒内重新打开它。

您可以使用 cookie 或窗口变量来存储“isClickable”标志，并且仅在可点击时执行您的逻辑。根据需要打开和关闭 isClickable。也许在按钮上显示一个半透明的 div 以使其变灰并使其无法被鼠标点击。

似乎没有充分的理由从 dom 中删除该元素，然后稍后再将其附加回来。长话短说，我看到的唯一问题是超时可能没有设置。jQuery 我只是认为你最好走一条不同的路线而不是实际操纵 dom 本身。（隐藏、重叠或只是停止处理点击）。

于 2012-12-31T02:18:13.747 回答
0

如果您只想让 click 事件在 x 秒内忽略任何操作，您可以编写如下内容：

HTML

​&lt;button>Click Me</button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

jQuery

​$("button").click(function(){
    var $this = $(this);
    if(!$this.data("disabled")){
        alert("You clicked the button.  You won't be able to click it again for 5 seconds.");

        $this.data("disabled", true);
        setTimeout(function(){
            $this.data("disabled", false);
        }, 5000);
    }
});​​​​

jsfiddle 中的演示

如果按钮的disabled数据设置为true，它将跳过点击事件的内容。

如果不是disabled，它将运行其代码，然后禁用自身。使用setTimeout它可以在 x 秒内重新启用自身。

于 2012-12-31T02:21:56.997 回答
0

我解决了这个问题：

var isClickable=true, wait = 500;
$(document).on("click",".new_game_list_row",function(event){

    if(isClickable) {
        isClickable = false;
        var self = $(this);
        //As the element clicked on has it's data attributes defined
        //Retrieves it when the element is clicked on
        var id_quiz_list = self.data('quizlistId'),
            difficult = self.data('difficult');
            userid = $("#new_game_list_wrap").data('userid');
            $("#new_game_list_wrap").fadeOut("slow");
            $.post("new_game_add.php","userid="+userid+"&id_quiz_list="+id_quiz_list+"&difficult="+difficult,function(data){
                $answer = data;
                    self.remove();
                    $("#quiz_list_wrap").append('<div class="quiz_list_row" data-quizlist-id="'+id_quiz_list+'" data-quizlevel-reached="0" '+
                    '><div class="inline list_cell" id="quiz_list_cell_rownew_id1">Quiz '+id_quiz_list+'</div><div '+
                    'class="inline list_cell" id="quiz_list_cell_rownew_id2">Current level: 1</div>');
                    showtrick(id_quiz_list,1);
            }, "html"); 
                setTimeout(function(){
                    isClickable = true;
                }, wait);
    }
});

问题解决了。

于 2012-12-31T03:18:50.003 回答