试过$。当和$，然后没有幸运 [英] Tried $.when and $.then no lucky
问题描述
这个问题并不重要，我尝试过，它会播放所有的文字。
我试图显示一些单词，然后当它完成时显示完整的句子。一起。
您可以向我解释我做错了什么吗？
function DisplayHdline（callback）{
var str =立即帮助停止CRUELTY。;
var spans ='< span>'+ str.split（/ \s + /）。join（'< / span>< span>）+'< / span>';
jQuery（span）.hide（）。appendTo（'＃vidheadline'）。each（function（i）{
jQuery（this）.delay（2000 * i）.fadeIn（ 'fast'）。delay（1000）.fadeOut（50）;
}）;
callback（）;
$ b $ function addComplete（）{
jQuery（'LOREM IPSUM DOLLOR'）。appendTo（'＃vidheadline'）。fadeIn（）;
// alert（'我的句子在哪儿'）;
DisplayHdline（function（）{
jQuery.when（this）.done（addComplete（））;
}）;
//jQuery.when（DisplayHdline（））.then（addComplete（））;
谢谢
搜索和尝试不同的解决方案在这里找到。但所有的结果都一样，我清楚地知道我做错了什么。
编辑：这是我用
函数结束typePlay（）{
var actionStr =立即帮助停止CRUELTY。;
var spans =''+ actionStr.split（/ \s + /）。join（''）+'';
function DisplayHdline（）{
return jQuery（spans）.hide（）。appendTo（'＃vidheadline'）。each（function（i）{
jQuery（this）.delay（2000 * I）.fadeIn（'fast'）。delay（1000）.fadeOut（50）;
}）。promise（）;
}
function addComplete（）{
jQuery（'＃vidheadline'）。hide（）。append（'< p id =completeHeadline>'+ actionStr + '< / p>'）.fadeIn（）;
}
DisplayHdline（）。done（addComplete）;
}
window.setInterval（function typeTimer（）{
jQuery（'＃vidheadline'）。empty（）;
typePlay（）;
}，25000）;
typePlay（）。done（typeTimer）;
感谢
;）
回调和延迟是链接异步操作的两种不同技巧。你做一个或另一个。
$。当不关心 DisplayHdLine（）接受回调;它期望的是它返回一个递延的（或者 Promise ），并且它不会。
使用回调方法，您需要的是;
DisplayHdline（addComplete）;
然而，你有问题，你正在调用回调在 DisplayHdLine 中的错误位置。一旦所有元素都已淡入，您需要调用它。最简单的方法是使用 promise（） ;
函数DisplayHdline（callback）{
var str =立即帮助停止CRUELTY。;
var spans ='< span>'+ str.split（/ \s + /）。join（'< / span>< span>）+'< / span>';
jQuery（span）.hide（）。appendTo（'＃vidheadline'）。each（function（i）{
jQuery（this）.delay（2000 * i）.fadeIn（ 'fast'）。delay（1000）.fadeOut（50）;
}）。promise（）。done（callback）;
}
您完整的代码将会是：
函数DisplayHdline（callback）{
var str =立即帮助停止CRUELTY。;
var spans ='< span>'+ str.split（/ \s + /）。join（'< / span>< span>）+'< / span>';
jQuery（span）.hide（）。appendTo（'＃vidheadline'）。each（function（i）{
jQuery（this）.delay（2000 * i）.fadeIn（ 'fast'）。delay（1000）.fadeOut（50）;
}）。promise（）。done（callback）;
$ b $ function addComplete（）{
jQuery（'LOREM IPSUM DOLLOR'）。appendTo（'＃vidheadline'）。fadeIn（）;
// alert（'我的句子在哪儿'）;
}
DisplayHdline（addComplete）;
然而，正如您现在在中使用deferreds DisplayHdline ，你可以从 DisplayHdline 返回承诺，这可能会给你更清晰的代码：
函数DisplayHdline（）{
var str =立即帮助停止CRUELTY。;
var spans ='< span>'+ str.split（/ \s + /）。join（'< / span>< span>）+'< / span>';
返回jQuery（跨度）.hide（）。appendTo（'＃vidheadline'）。each（function（i）{
jQuery（this）.delay（2000 * i）.fadeIn （'fast'）。delay（1000）.fadeOut（50）;
}）。promise（）;
$ b $ function addComplete（）{
jQuery（'LOREM IPSUM DOLLOR'）。appendTo（'＃vidheadline'）。fadeIn（）;
// alert（'我的句子在哪儿'）;
}
DisplayHdline（）。done（addComplete）;
另外，请注意传递函数的区别（正如我一直在没有（））的情况下调用函数（你一直在做）。有关更多信息，请参阅为什么当方法立即执行时我使用setTimeout？
I am trying to display some words and then when it is complete display the full sentence.
the problem is doesn't matter which I try, it plays all together. Not one after the other.
Can one of you explain to me what I am doing wrong?
function DisplayHdline( callback){
var str = "HELP STOP CRUELTY NOW.";
var spans = '<span>' + str.split(/\s+/).join(' </span><span>') + '</span>';
jQuery(spans).hide().appendTo('#vidheadline').each(function(i) {
jQuery(this).delay(2000 * i).fadeIn('fast').delay(1000).fadeOut(50);
});
callback();
}
function addComplete(){
jQuery('LOREM IPSUM DOLLOR').appendTo('#vidheadline').fadeIn();
//alert('Where is my sentence');
}
DisplayHdline(function(){
jQuery.when( this ).done( addComplete() );
});
//jQuery.when( DisplayHdline() ).then( addComplete() );
Thanks
Ps.: I did search and tried different sollutions found here. But all with the same outcome, so clearly I am doing something wrong
Edit: this is what I ended up with function typePlay(){ var actionStr = "HELP STOP CRUELTY NOW."; var spans = '' + actionStr.split(/\s+/).join(' ') + '';
function DisplayHdline(){
return jQuery(spans).hide().appendTo('#vidheadline').each(function(i) {
jQuery(this).delay(2000 * i).fadeIn('fast').delay(1000).fadeOut(50);
}).promise();
}
function addComplete(){
jQuery('#vidheadline').hide().append( '<p id="completeHeadline">' +actionStr+'</p>' ).fadeIn();
}
DisplayHdline().done(addComplete);
}
window.setInterval(function typeTimer(){
jQuery('#vidheadline').empty();
typePlay();
}, 25000);
typePlay().done(typeTimer);
Thanks ;)
Callbacks and Deferreds are two different techniques for chaining asynchronous actions. You do one, or the other.
$.when doesn't care that DisplayHdLine() accepts a callback; what it expects is that it returns a Deferred (or Promise), and it doesn't.
Using the callback approach, what you want is;
DisplayHdline(addComplete);
However, you then have the problem that you're calling the callback within DisplayHdLine at the wrong place. You need to call it once all of your elements have faded in. The easiest way to do this is using promise();
function DisplayHdline(callback){
var str = "HELP STOP CRUELTY NOW.";
var spans = '<span>' + str.split(/\s+/).join(' </span><span>') + '</span>';
jQuery(spans).hide().appendTo('#vidheadline').each(function(i) {
jQuery(this).delay(2000 * i).fadeIn('fast').delay(1000).fadeOut(50);
}).promise().done(callback);
}
You're complete code for this would then be:
function DisplayHdline(callback){
var str = "HELP STOP CRUELTY NOW.";
var spans = '<span>' + str.split(/\s+/).join(' </span><span>') + '</span>';
jQuery(spans).hide().appendTo('#vidheadline').each(function(i) {
jQuery(this).delay(2000 * i).fadeIn('fast').delay(1000).fadeOut(50);
}).promise().done(callback);
}
function addComplete(){
jQuery('LOREM IPSUM DOLLOR').appendTo('#vidheadline').fadeIn();
//alert('Where is my sentence');
}
DisplayHdline(addComplete);
However, as you're now using deferreds within DisplayHdline, you could return the promise from DisplayHdline, which may give you cleaner code:
function DisplayHdline(){
var str = "HELP STOP CRUELTY NOW.";
var spans = '<span>' + str.split(/\s+/).join(' </span><span>') + '</span>';
return jQuery(spans).hide().appendTo('#vidheadline').each(function(i) {
jQuery(this).delay(2000 * i).fadeIn('fast').delay(1000).fadeOut(50);
}).promise();
}
function addComplete(){
jQuery('LOREM IPSUM DOLLOR').appendTo('#vidheadline').fadeIn();
//alert('Where is my sentence');
}
DisplayHdline().done(addComplete);
Also, note the difference between passing a function (as I have been doing, without the ()) vs calling the function (which you've been doing). For more info, see Why is the method executed immediately when I use setTimeout?
这篇关于试过$。当和$，然后没有幸运的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
