click

Vincerolf
Javascript

Salut,

Voila comme je test mon code jusqu'a le faire bugger, il y a une chose que j'aimerai debugger et vous avez la réponse j'en suis sur. j'utilise .click() sur une #div et si je suis un utilisateur raisonnable, je click une fois et l'action s'effectue correctement.
Si je fais le malin et que je click " à donf ", ca ne se comporte plus comme je voudrait.

donc comment dire a jquery tant que la fonction n'est pas terminée tu ne me redonnes pas la main sur le Dom... Enfin vous m'avez compris ?

merci

9 réponses

Vallyan
Réponse acceptée

lorsque tu cliques, l'evennement est immediat et il n'y a donc pas de callback.
Ce que tu peux faire c'est empecher un second clique de trigger ton evenement pendant une certaine durée (1 seconde dans mon exemple)

var block = false;
$("#div").click(function(e){
    if (!block){
        block = true;
        /* fais ton truc */
        setTimeout(function(){ block = false}, 1000);
    }
});

A tester, évidement ;) ...

Maenhyr
Réponse acceptée

Il faut que tu mettes ta fonction de callback dans une fonction nommée. Ensuite tu fais appel à ça : http://api.jquery.com/unbind/.

Ta rquête AJAX http://api.jquery.com/jQuery.ajax/#callback-functions te renvoies une Promise, tu as plusieurs callbacks et celle qui nous intéresse est .always(). Tu vas rebinder le click sur ta div dans cette fonction.

En pseudo code ça donnerait quelque chose comme ça :

function maFunc() {
    // on unbind le click pour prévenir un autre appui
    $(document).off('click', '#div', maFunc);

    $.ajax({
        // ajouter les valeurs pour faire la requête ajax
    })
    // placer le code si la requête a réussie
    .done(function() {
        alert( "success" );
    })
    // placer le code s'il y a erreur sur la requête
    .fail(function() {
        alert( "error" );
    })
    // comme son nom l'indique, cette callback sera appelée à chaque fois que la requête AJAX sera résolue. 
    // Qu'elle aie réussie ou échouée
    .always(function() {
        $(document).on('click', '#div', maFunc);
    });

}
$(document).on('click', '#div', maFunc);
Vincerolf
Auteur

Super Vallyan, t'assures ! merci

Maenhyr

je suis d'accord sur le principe mais pas trop pour le coup du timeout. que doit faire le code dans le click () ? parce que si tu fais une requête ajax par exemple, tu n'es pas sûr qu'elle soit résolue dans la seconde, auquel cqs on pourra relancer une deuxième requête au click.

sois déterministe lorsque tu réactives le click(). une autre manière, plus safe serait de faire un unbind() et de rebinder le click() à la fin.

Vallyan

Entierement d'accord. J'ai assumé qu'il n'y avait pas de callback dans les taches a réaliser vu la question, mais si callback il y a, callback tu utiliseras ...

Vincerolf
Auteur

effectivement je fais une requête ajax...Unbind et rebinder ? Comment je fais donc ?

Vincerolf
Auteur

Ok merci prbaron c'est parfait comme ca et merci Vallyan

Vincerolf
Auteur

salut j'ai toujours un peu de mal a comprendre bind et unbind... j'ai changer mon code depuis et je n'utilise plus une fonction mais un On.('click') et la j'aimerai bloquer l'événement tant que ma réponse ajax n'a pas était renvoyée :

$('.button_kiffer').on('click',function(){
//bloquage du bouton
    //requête ajax
//deblocage du bouton
});

Si je clic a nouveau sur le bouton alors que la requête n'est pas fini ca me pose un problème...Comment bloque t on le bouton durant la requete ?

merci

Vincerolf
Auteur

Bon j'ai fais comme ca : est-ce que c'est propre ou pas, je ne sais pas...ca marche en tout cas.

$('#intro_page_kiffer').on('click','.button_kiffer:not(.working)',function(){
    $this = $(this);
    $this.addClass('working');
//requete ajax
    .done(function(){
    $this.removeClass('working');
});