web-dev-qa-db-fra.com

Dans la suite, il est possible d’obtenir une fonction de rappel après avoir défini une nouvelle règle css?

J'ai $('.element').css("color","yellow") et j'ai besoin que le prochain événement soit seulement après celui-ci, quelque chose qui ressemble à $('.element').css("color","yellow",function(){ alert(1); }) J'en ai besoin parce que:

$('.element').css("color","yellow");
 alert(1);

les événements se produisent presque tous à la fois, et ce moment appelle le bogue dans l'effet d'animation (alert (1) est ici, par exemple, dans le module réel, c'est l'animation)

javascriptjqueryhtmlcss
31
Stasonix Niculin

Les rappels ne sont nécessaires que pour les fonctions asynchrones. La fonction css sera toujours terminée avant la poursuite de l'exécution du code, donc aucun rappel n'est requis. Dans le code:

$('.element').css('color', 'yellow');
alert(1);

La couleur sera modifiée avant le déclenchement de l'alerte. Vous pouvez le confirmer en lançant:

$('.element').css('color', 'yellow');
alert($('.element').css('color'));

En d'autres termes, si vous voulez utiliser un rappel, exécutez-le après la fonction css:

$('.element').css('color', 'yellow');
cb();
22
Zack Bloom

vous pouvez utiliser la promesse

$('.element').css("color","yellow").promise().done(function(){
    alert( 'color is yellow!' );
});

http://codepen.io/onikiienko/pen/wBJyLP

19
user2497228

Vous pouvez utiliser setTimeout pour augmenter le temps de repos entre l'alerte et le css comme suit:

function afterCss() {
    alert(1);
}

$('.element').css("color","yellow");
setTimeout(afterCss, 1000);

Cela fera apparaître l'alerte une seconde après la validation des modifications css.

Cette réponse est obsolète, vous pouvez donc utiliser les promesses de ES6 comme ci-dessus. 

$('.element').css("color", "yellow").promise().done(function(){
    // The context here is done() and not $('.element'), 
    // be careful when using the "this" variable
    alert(1);
});
4
Guilherme David da Costa

Il n'y a pas de rappel pour la fonction jquery css. Cependant, nous pouvons faire le tour, ce n’est pas une bonne pratique, mais cela fonctionne.

Si vous appelez juste après avoir effectué le changement

$('.element').css('color','yellow');
alert('DONE');

Si vous voulez que cette fonction ait été appelée juste après le changement, faites une boucle d'intervalle.

$('.element').css('color','yellow');
    var detectChange = setInterval(function(){
    var myColor = $('.element').css('color');
    if (myColor == 'yellow') {
    alert('DONE');
    clearInterval(detectChange); //Stop the loop
}
},10);

Pour éviter une boucle infinie, définissez une limite

var current = 0;
$('.element').css('color','yellow');
    current++;
    var detectChange = setInterval(function(){
    var myColor = $('.element').css('color');
    if (myColor == 'yellow' || current >= 100) {
      alert('DONE');
      clearInterval(detectChange); //Stop the loop
    }
},10);

Ou en utilisant settimeout comme mentionné ci-dessus /

2
singuyen

Oui c'est possible. Vous devez utiliser la fonction jQuery animate avec une durée de 0:

    $('#my-selector').animate({
        'my-css-property-name': 'my-css-property-value'
    }, {
        duration: 0,
        done: function(animation, jumpedToEnd) {
            // Your callback here
        }
    })

Pour en savoir plus sur les paramètres de la fonction done, consultez la documentation .

0
Black Shell

utiliser jquery promise,

$('.element').css("color","yellow").promise().done(function(){alert(1)});
0
xiaoyifang