使jquery函数等待，直到它的前一个调用已解决 [英] Make a jquery function wait till it's previous call has been resolved
本文介绍了使jquery函数等待，直到它的前一个调用已解决的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我基本上有一个自定义jQuery函数 messager fadeOut 和 fadeIn 。
（函数（$）{
$ .fn.messager =函数（消息，效果，速度）{
$（this）.fadeOut（速度） .delay（speed）.text（message）.fadeIn（speed）;
return this;
};
}（jQuery））;
所以，我有一个名为 $ elem 当 $ elem.messager 被多次调用（使用不同的消息）时，我希望messager函数等到最后一次调用完成。正如上一次 FadeIn 已完成。因为当前发生的情况是函数的第二次调用覆盖了函数第一次调用的动画效果。
任何想法？
尝试
（function（$）{
$ .fn.messager = messager;
函数messager（message，speed，callback）{
var that = $（this）;
if（that。 data（queue）=== undefined）{
$ .fx.interval = 0;
that.data（queue，[]）;
that.data（msgg ，[]];
};
var q = that.data（queue），
msgs = that.data（msg）;
q.push （[message，speed，callback]）;
msgs.push（message）;
var fn = function（m，s，cb）{
return that.fadeOut（s，function（）{
that.text（m）
}）
.delay（s）
.fadeIn（s，cb）
.promise（fx）
.done（function（el）{
console.log（call返回，q.length）; （q.length> 1）{
q.splice（0,1）;
。
fn.apply（el，q [0]）
} else {
el.data（queue，[]）;
console.log（done，el.data（queue）。length）;
always（promise，[complete，msgs]）
.then（complete）;
}
return el.promise（fx）;
$ b $ promise $ = .when（！that.queue（fx）。length
？fn.apply（that，q [ 0））
：that.promise（fx））
，always = function（elem，args）{
if（elem.state（）=== （））{
console.log（elem.state（），args）
} else {
if（elem.state（）===resolved）{
elem.done（函数（elem）{
console.log（msgs.length +messages complete）;
}）
};
};
return elem.promise（fx）
};
always（promise，[start，message，q.length]）;
返回
};
}（jQuery））;
请参阅。promise（）
（function（$）{$ .fn.messager = messager; function messager（message，speed，callback）{var that = $（this）; if（that.data（queue）=== undefined）{$ .fx.interval = 0; that.data（queue （msg）; q.push（[message，msg， （），msgs.push（message）; var fn = function fadeIn（s，cb）.promise（fx）.done（function（el）{console.log（ca llback，q.length）;如果（q.length> 1）{q.splice（0,1）; fn.apply（el，q [0]）} else {el.data（queue，[]）; console.log（done，el.data（queue）。length）;总是（promise，[complete，msgs]）.then（complete）; } return el.promise（fx）; }），promise = $ .when（！that.queue（fx）.length？fn.apply（that，q [0]）：that.promise（fx）），always = function（elem， args）{if（elem.state（）===pending）{console.log（elem.state（），args）} else {if（elem.state（）===resolved）{elem。 （函数（elem）{console.log（msgs.length +messages complete）;}）}; }; return elem.promise（fx）};总是（承诺，[开始，消息，q.length]）;返回那};}（jQuery））; var complete = function（）{if（！$（pre）。is（*））{$（body）。append（< pre> + JSON.stringify（$（this））。 data（msg），null，4））} else {$（pre）.text（JSON.stringify（$（this）.data（msg），null，4））; $（label [for = messages]）.text（messages updated）.show（0）.delay（350）.hide（0）}; };函数（）{$（this）.animate（{fontSize：）;函数（）{$（this）.css（color，purple）。函数（）{$（this）.css（color，inherit）}）}）}; var input = $（input）; var $ elem = $（＃messages）; $ elem.messager（0，1000）.messager（1，100）.messager（2，200）.messager（3，300）.messager（4，400）.messager 5，500）.messager（6，600）.messager（7，700）.messager（8，800）.messager（9，900） $ .each（abcdefghijklmnopqrstuvwxyz.split（），function（key，val）{$ elem.messager（val，200，fx）;}）; $（button）。on（click，function（）{$ elem.messager（input.val（）。length> 0？input.val（）：$ .now（），200）; input。 val（）}）;
#messages {display ：块;高度：38px;字体大小：36px; position：absolute;} label [for = messages] {color：blue;} pre {position：relative;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script> ;< label for =button>添加消息< / label>& nbsp;< label for =messages>< / label>< br>< input type =text/> ;<按钮>点击< /按钮>< br>< / code>< / $ p>< div id =messages> messages< / div>< br>< $ p>
So, I've searched for this high and low and maybe I'm just having trouble understanding jQuery's deferred function or I'm completely on the wrong track. So any help would be appreciated folks!
I basically have a custom jQuery function messager that displays a message with a fadeOut and fadeIn.
(function ( $ ) {
$.fn.messager = function(message, effect, speed) {
$(this).fadeOut(speed).delay(speed).text(message).fadeIn(speed);
return this;
};
}( jQuery ));
So, I have a div called $elem and when $elem.messager gets called multiple times (with different messages), I would like the messager function to wait till its last call has finished. As in the last FadeIn has finished. Because currently what's happening is that the second call of the function is overwriting the animation effect of the first call of the function.
Any ideas?
解决方案
Edit, Updated
Try
(function ($) {
$.fn.messager = messager;
function messager(message, speed, callback) {
var that = $(this);
if (that.data("queue") === undefined) {
$.fx.interval = 0;
that.data("queue", []);
that.data("msg", []);
};
var q = that.data("queue"),
msgs = that.data("msg");
q.push([message, speed, callback]);
msgs.push(message);
var fn = function (m, s, cb) {
return that.fadeOut(s, function () {
that.text(m)
})
.delay(s)
.fadeIn(s, cb)
.promise("fx")
.done(function (el) {
console.log("callback", q.length);
if (q.length > 1) {
q.splice(0, 1);
fn.apply(el, q[0])
} else {
el.data("queue", []);
console.log("done", el.data("queue").length);
always(promise, ["complete", msgs])
.then(complete);
}
return el.promise("fx");
})
}
, promise = $.when(!that.queue("fx").length
? fn.apply(that, q[0])
: that.promise("fx"))
, always = function (elem, args) {
if (elem.state() === "pending") {
console.log(elem.state(), args)
} else {
if (elem.state() === "resolved") {
elem.done(function (elem) {
console.log(msgs.length + " messages complete");
})
};
};
return elem.promise("fx")
};
always(promise, ["start", message, q.length]);
return that
};
}(jQuery));
See .promise()
(function ($) {
$.fn.messager = messager;
function messager(message, speed, callback) {
var that = $(this);
if (that.data("queue") === undefined) {
$.fx.interval = 0;
that.data("queue", []);
that.data("msg", []);
};
var q = that.data("queue"),
msgs = that.data("msg");
q.push([message, speed, callback]);
msgs.push(message);
var fn = function (m, s, cb) {
return that.fadeOut(s, function () {
that.text(m)
})
.delay(s)
.fadeIn(s, cb)
.promise("fx")
.done(function (el) {
console.log("callback", q.length);
if (q.length > 1) {
q.splice(0, 1);
fn.apply(el, q[0])
} else {
el.data("queue", []);
console.log("done", el.data("queue").length);
always(promise, ["complete", msgs])
.then(complete);
}
return el.promise("fx");
})
}
, promise = $.when(!that.queue("fx").length
? fn.apply(that, q[0])
: that.promise("fx"))
, always = function (elem, args) {
if (elem.state() === "pending") {
console.log(elem.state(), args)
} else {
if (elem.state() === "resolved") {
elem.done(function (elem) {
console.log(msgs.length + " messages complete");
})
};
};
return elem.promise("fx")
};
always(promise, ["start", message, q.length]);
return that
};
}(jQuery));
var complete = function() {
if (!$("pre").is("*")) {
$("body").append("<pre>" + JSON.stringify($(this).data("msg"), null, 4))
} else {
$("pre")
.text(JSON.stringify($(this).data("msg"), null, 4));
$("label[for=messages]").text("messages updated")
.show(0).delay(350).hide(0)
};
};
var fx = function() {
$(this).css("color", "purple").animate({
fontSize: "72"
}, 100, function() {
$(this).animate({
fontSize: "36"
}, 100, function() {
$(this).css("color", "inherit")
})
})
};
var input = $("input");
var $elem = $("#messages");
$elem.messager("0", 1000)
.messager("1", 100)
.messager("2", 200)
.messager("3", 300)
.messager("4", 400)
.messager("5", 500)
.messager("6", 600)
.messager("7", 700)
.messager("8", 800)
.messager("9", 900);
$.each("abcdefghijklmnopqrstuvwxyz".split(""), function(key, val) {
$elem.messager(val, 200, fx);
});
$("button").on("click", function() {
$elem.messager(input.val().length > 0 ? input.val() : $.now(), 200);
input.val("")
});
#messages {
display:block;
height:38px;
font-size:36px;
position : absolute;
}
label[for=messages] {
color:blue;
}
pre {
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="button">add messages</label> <label for="messages"></label><br>
<input type="text" /><button>click</button>
<br />
<div id="messages">messages</div>
<br><br>
这篇关于使jquery函数等待，直到它的前一个调用已解决的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
