Javascript 在 JQuery 中，是否可以在设置新的 css 规则后获取回调函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7974761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In JQuery, Is it possible to get callback function after setting new css rule?
提问by Stasonix Niculin
I have $('.element').css("color","yellow")and I need that next event was only after this one, something looks like $('.element').css("color","yellow",function(){ alert(1); })I need this because:
我有$('.element').css("color","yellow")并且我需要下一个事件只是在这个事件之后，看起来$('.element').css("color","yellow",function(){ alert(1); })我需要这个，因为：
$('.element').css("color","yellow");
alert(1);
events are happen at one time almost, and this moment call the bug in animation effect (alert(1) is just here for example, in real module it's animation)
事件几乎同时发生，这一刻调用动画效果中的错误（例如，alert(1) 只是在这里，在真实模块中它是动画）
回答by user2497228
you can use promise
你可以使用承诺
$('.element').css("color","yellow").promise().done(function(){
alert( 'color is yellow!' );
});
回答by Zack Bloom
Callbacks are only necessary for asynchronous functions. The css function will always complete before code execution continues, so a callback is not required. In the code:
只有异步函数才需要回调。css 函数将始终在代码执行继续之前完成，因此不需要回调。在代码中：
$('.element').css('color', 'yellow');
alert(1);
The color will be changed before the alert is fired. You can confirm this by running:
在触发警报之前颜色将更改。您可以通过运行来确认这一点：
$('.element').css('color', 'yellow');
alert($('.element').css('color'));
In other words, if you wanted to use a callback, just execute it after the css function:
换句话说，如果要使用回调，只需在 css 函数之后执行即可：
$('.element').css('color', 'yellow');
cb();
回答by Guilherme David da Costa
You can use setTimeout to increase the sleep time between the alert and the css like this:
您可以使用 setTimeout 来增加警报和 css 之间的睡眠时间，如下所示：
function afterCss() {
alert(1);
}
$('.element').css("color","yellow");
setTimeout(afterCss, 1000);
This will make the alert appear 1 second after the css changes were committed.
这将使警报在提交 css 更改后 1 秒出现。
This answer is outdated, so you might want to use promises from ES6 like the answer above.
这个答案已经过时了，所以你可能想像上面的答案一样使用来自 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);
});
回答by singuyen
There's no callback for jquery css function. However, we can go around, it's not a good practice, but it works.
jquery css 函数没有回调。但是，我们可以四处走动，这不是一个好习惯，但它有效。
If you call it right after you make the change
如果您在进行更改后立即调用它
$('.element').css('color','yellow');
alert('DONE');
If you want this function has only been called right after the change, make an interval loop.
如果您希望此函数仅在更改后立即调用，请进行间隔循环。
$('.element').css('color','yellow');
var detectChange = setInterval(function(){
var myColor = $('.element').css('color');
if (myColor == 'yellow') {
alert('DONE');
clearInterval(detectChange); //Stop the loop
}
},10);
To avoid an infinite loop, set a limit
为避免无限循环，请设置限制
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);
Or using settimeout as mentioned above/
或者使用上面提到的 settimeout/
回答by xiaoyifang
use jquery promise,
使用 jquery 承诺，
$('.element').css("color","yellow").promise().done(function(){alert(1)});
回答by Luca Fagioli
Yes, it is possible. You need to use the jQuery animatefunction with a duration of 0:
对的，这是可能的。您需要使用animate持续时间为的 jQuery函数0：
$('#my-selector').animate({
'my-css-property-name': 'my-css-property-value'
}, {
duration: 0,
done: function(animation, jumpedToEnd) {
// Your callback here
}
})
To know more about the donefunction parameters, check the documentation.
要了解有关done函数参数的更多信息，请查看文档。
