CODEWITHSUNDEEP
jquerysettimeoutdelay
Th3B0Y
Th3B0Y

Reputation: 994

SetTimeout and delay not working

I have the following code:

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);
    });

I'm trying to use setTimeout() to avoid multi clicks on the row. My table is getting full of ghost entries.

I tried delay but it haven't work.

Any idea?

Upvotes: 0

Views: 214

Answers (3)

Th3B0Y
Th3B0Y

Reputation: 994

I solved with this:

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);
    }
});

Problem solved.

Upvotes: 0

Jason Whitted
Jason Whitted

Reputation: 4024

If you want to just have the click event ignore any action for x seconds you could write something like this:

HTML

​<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);
    }
});​​​​

Demo in jsfiddle

If the button has its disabled data set to true, it will just skip over the content of the click event.

If it is not disabled it will run its code and then disable itself. Using the setTimeout it can re-enable itself in x seconds.

Upvotes: 0

user1931103
user1931103

Reputation:

At first glance I don't see "wait" being defined anywhere, that needs to be a millisecond integer value. Other than that there might be better off approaches, for example when a click event comes in immediately turn off the binding, then use your setTimeout to turn it back on in n milliseconds.

You could use a cookie or window variable to store a "isClickable" flag and only execute your logic if clickable. Toggle isClickable on and off as necessary. Maybe display a semi translucent div over the button to gray it out and make it unclickable from the mouse.

Seems like there would be no good reason to remove the element from the dom and then append it back a little later on. So long story short, the only problem I see with the timeout is that wait may not be set. The jQuery I just think you'd be better off going a different route and not actually manipulating the dom itself. (Hide, Overlap or just stop handling click instead).

Upvotes: 1

Related Questions