В JQuery можно ли получить функцию обратного вызова после установки нового правила css?

У меня есть $('.element').css("color","yellow"), и мне нужно, чтобы следующее событие было только после этого, что-то похожее на $('.element').css("color","yellow",function(){ alert(1); }) Мне нужно это, потому что:

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

события происходят в одно время почти, и этот момент вызывает ошибку в эффекте анимации (предупреждение (1) только здесь, например, в реальном модуле это анимация)

Ответы

Ответ 1

Обратные вызовы необходимы только для асинхронных функций. Функция css всегда будет завершена до завершения выполнения кода, поэтому обратный вызов не требуется. В коде:

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

Цвет будет изменен до срабатывания предупреждения. Вы можете подтвердить это, выполнив:

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

Другими словами, если вы хотите использовать обратный вызов, просто выполните его после функции css:

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

Ответ 2

вы можете использовать обещание

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

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

Ответ 3

Вы можете использовать setTimeout для увеличения времени ожидания между предупреждением и css следующим образом:

function afterCss() {
    alert(1);
}

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

Это приведет к появлению предупреждения через 1 секунду после того, как были изменены изменения css.

Этот ответ устарел, поэтому вы можете использовать promises из ES6 как ответ выше.

$('.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

Нет никакого обратного вызова для функции jquery css. Однако мы можем обойти, это не очень хорошая практика, но она работает.

Если вы вызываете это сразу после внесения изменения

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

Если вы хотите, чтобы эта функция была вызвана сразу после изменения, выполните интервал цикла.

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

Чтобы избежать бесконечного цикла, установите предел

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

Или используя настройку, как указано выше/