我正试图找到一种最简单的方法,只有在前一个函数(collapseExpandMainMenu(this))完成时,才能用javascript(或jQuery)执行函数(resetMenuPosition())。
原始代码
$('.trmenuClass').click(function () {
$.when(collapseExpandMainMenu(this))
.done(function () {
resetMenuPosition();
});
});
我尝试过jQuery的不同变体,但我认为我使用jQuery是错误的,因为我没有完全理解延迟对象的概念。
欢迎您提供任何javascript或jQuery建议。
谢谢,-Tim
编辑为包含collapseExpandMainMenu(this)代码
function collapseExpandMainMenu(i, callback) {
isCollapsing = ($(i).find('div').attr('class')) == 'minusSign';
currentScrollTop = $('#contents').scrollTop();
var fav, Dash, Conn, Hire, Retain, Activityreports;
var favSubmnuHt = 0, dashSubmnuHt = 0, connSubmnuHt = 0, hireSubmnuHt = 0, retainSubmnuHt = 0, activityreportsSubmnuHt = 0;
/*submenu height determination*/
$('.trmenuClass').each(function () {
if ($('tr.favtrClass').toggle().is(":visible")) {
fav = 1;
}
else {
fav = 0;
}
if ($('tr.dashboardtrClass').toggle().is(":visible")) {
Dash = 1;
}
else {
Dash = 0;
}
if ($('tr.connecttrClass').toggle().is(":visible")) {
Conn = 1;
}
else {
Conn = 0;
}
if ($('tr.hiretrClass').toggle().is(":visible")) {
Hire = 1;
}
else {
Hire = 0;
}
if ($('tr.retaintrClass').toggle().is(":visible")) {
Retain = 1;
}
else {
Retain = 0;
}
if ($('tr.activityreportstrClass').toggle().is(":visible")) {
Activityreports = 1;
}
else {
Activityreports = 0;
}
})
/*This gets the height of each dynamically created submenu along with bottom border*/
var favBottomBorder = 0; var dashBottomBorder = 0; var connectBottomBorder = 0; var hireBottomBorder = 0;
var retainBottomBorder = 0; var activityreportsBottomBorder = 0;
$('.favtrClass').each(function () {
favSubmnuHt = favSubmnuHt + 35;
favBottomBorder = favBottomBorder + 1;
})
$('.dashboardtrClass').each(function () {
dashSubmnuHt = dashSubmnuHt + 35;
dashBottomBorder = dashBottomBorder + 1;
})
$('.connecttrClass').each(function () {
connSubmnuHt = connSubmnuHt + 35;
connectBottomBorder = connectBottomBorder + 1;
})
$('.hiretrClass').each(function () {
hireSubmnuHt = hireSubmnuHt + 35;
hireBottomBorder = hireBottomBorder + 1;
})
$('.retaintrClass').each(function () {
retainSubmnuHt = retainSubmnuHt + 35;
retainBottomBorder = retainBottomBorder + 1;
})
$('.activityreportstrClass').each(function () {
activityreportsSubmnuHt = activityreportsSubmnuHt + 35;
activityreportsBottomBorder = activityreportsBottomBorder + 1;
})
/*submenu height determination */
var varFav = favSubmnuHt - favBottomBorder;
var varDash = dashSubmnuHt - dashBottomBorder;
var varConn = connSubmnuHt - connectBottomBorder;
var varHire = hireSubmnuHt - hireBottomBorder;
var varRetain = retainSubmnuHt - retainBottomBorder;
var varActivityreports = activityreportsSubmnuHt - activityreportsBottomBorder;
var rowCount = ($('#contents tr').length) * 35;
/*determination which submenu is open and which is closed*/
if (fav == 1) { favSubmnuHt; }
else if (fav == 0) { rowCount = rowCount - favSubmnuHt; }
if (Dash == 1) { dashSubmnuHt; }
else if (Dash == 0) { rowCount = rowCount - dashSubmnuHt; }
if (Conn == 1) { connSubmnuHt; }
else if (Conn == 0) { rowCount = rowCount - connSubmnuHt; }
if (Hire == 1) { hireSubmnuHt; }
else if (Hire == 0) { rowCount = rowCount - hireSubmnuHt; }
if (Retain == 1) { retainSubmnuHt; }
else if (Retain == 0) { rowCount = rowCount - retainSubmnuHt; }
if (Activityreports == 1) { activityreportsSubmnuHt; }
else if (Activityreports == 0) { rowCount = rowCount - activityreportsSubmnuHt; }
var heightOfSubMenuCombined = 0;
var idTotoggleSubMenu = $(i).closest('tr').attr('id'); // changes from "this" to "i"
if (idTotoggleSubMenu == "favoritestrId") {
$('tr.favtrClass').toggle(browserVar, function () { });
if (fav == 1) {
rowCount = rowCount - favSubmnuHt;
if (rowCount > $('#contents').height()) {
$('.scrollDownArrow').css({ visibility: "visible" });
}
else {
$('.scrollDownArrow').css({ visibility: "hidden" });
$('.scrollUpArrow').hide();
$('.scrollUpArrow').css({ visibility: "hidden" });
$(document).ready(resizingScrollbar);
}
}
else if (fav == 0) {
rowCount = rowCount + varFav;
if (rowCount > $('#contents').height()) {
$('.scrollDownArrow').css({ visibility: "visible" });
}
else {
$('.scrollDownArrow').css({ visibility: "hidden" });
$('.scrollUpArrow').hide();
$('.scrollUpArrow').css({ visibility: "hidden" });
$(document).ready(resizingScrollbar);
}
}
/*Code to toggle plus and minus sign*/
if ($('#favoritesMinusSignId').hasClass('minusSign')) {
$('#favoritesMinusSignId').addClass('plusSign').removeClass('minusSign');
}
else if ($('#favoritesMinusSignId').hasClass('plusSign')) {
$('#favoritesMinusSignId').addClass('minusSign').removeClass('plusSign');
}
}
else if (idTotoggleSubMenu == "dashboardtrId") {
/*Code to toggle submenu and make bottom scrolling arrow slide up and down*/
$('tr.dashboardtrClass').toggle(browserVar, function () { });
if (Dash == 1) {
rowCount = rowCount - dashSubmnuHt;
if (rowCount > $('#contents').height()) {
$('.scrollDownArrow').css({ visibility: "visible" });
}
else {
$('.scrollDownArrow').css({ visibility: "hidden" });
$('.scrollUpArrow').hide();
$('.scrollUpArrow').css({ visibility: "hidden" });
$(document).ready(resizingScrollbar);
}
}
else if (Dash == 0) {
rowCount = rowCount + varDash;
if (rowCount > $('#contents').height()) {
$('.scrollDownArrow').css({ visibility: "visible" });
}
else {
$('.scrollDownArrow').css({ visibility: "hidden" });
$('.scrollUpArrow').hide();
$('.scrollUpArrow').css({ visibility: "hidden" });
$(document).ready(resizingScrollbar);
}
}
/*Code to toggle plus and minus sign*/
if ($('#dashboardMinusSignId').hasClass('minusSign')) {
$('#dashboardMinusSignId').addClass('plusSign').removeClass('minusSign');
}
else if ($('#dashboardMinusSignId').hasClass('plusSign')) {
$('#dashboardMinusSignId').addClass('minusSign').removeClass('plusSign');
}
}
else if (idTotoggleSubMenu == "connecttrId") {
/*Code to toggle submenu and make bottom scrolling arrow slide up and down*/
$('tr.connecttrClass').toggle(browserVar, function () { });
if (Conn == 1) {
rowCount = rowCount - connSubmnuHt;
if (rowCount > $('#contents').height()) {
$('.scrollDownArrow').css({ visibility: "visible" });
}
else {
$('.scrollDownArrow').css({ visibility: "hidden" });
$('.scrollUpArrow').hide();
$('.scrollUpArrow').css({ visibility: "hidden" });
$(document).ready(resizingScrollbar);
}
}
else if (Conn == 0) {
rowCount = rowCount + varConn;
if (rowCount > $('#contents').height()) {
$('.scrollDownArrow').css({ visibility: "visible" });
}
else {
$('.scrollDownArrow').css({ visibility: "hidden" });
$('.scrollUpArrow').hide();
$('.scrollUpArrow').css({ visibility: "hidden" });
$(document).ready(resizingScrollbar);
}
}
/*Code to toggle plus and minus sign*/
if ($('#connectMinusSignId').hasClass('minusSign')) {
$('#connectMinusSignId').addClass('plusSign').removeClass('minusSign');
}
else if ($('#connectMinusSignId').hasClass('plusSign')) {
$('#connectMinusSignId').addClass('minusSign').removeClass('plusSign');
}
}
else if (idTotoggleSubMenu == "hiretrId") {
/*Code to toggle submenu and make bottom scrolling arrow slide up and down*/
$('tr.hiretrClass').toggle(browserVar, function () { });
if (Hire == 1) {
rowCount = rowCount - hireSubmnuHt;
if (rowCount > $('#contents').height()) {
$('.scrollDownArrow').css({ visibility: "visible" });
}
else {
$('.scrollDownArrow').css({ visibility: "hidden" });
$('.scrollUpArrow').hide();
$('.scrollUpArrow').css({ visibility: "hidden" });
$(document).ready(resizingScrollbar);
}
}
else if (Hire == 0) {
rowCount = rowCount + varHire;
if (rowCount > $('#contents').height()) {
$('.scrollDownArrow').css({ visibility: "visible" });
}
else {
$('.scrollDownArrow').css({ visibility: "hidden" });
$('.scrollUpArrow').hide();
$('.scrollUpArrow').css({ visibility: "hidden" });
$(document).ready(resizingScrollbar);
}
}
/*Code to toggle plus and minus sign*/
if ($('#hireMinusSignId').hasClass('minusSign')) {
$('#hireMinusSignId').addClass('plusSign').removeClass('minusSign');
}
else if ($('#hireMinusSignId').hasClass('plusSign')) {
$('#hireMinusSignId').addClass('minusSign').removeClass('plusSign');
}
}
else if (idTotoggleSubMenu == "retaintrId") {
/*Code to toggle submenu and make bottom scrolling arrow slide up and down*/
$('tr.retaintrClass').toggle(browserVar, function () { });
if (Retain == 1) {
rowCount = rowCount - retainSubmnuHt;
if (rowCount > $('#contents').height()) {
$('.scrollDownArrow').css({ visibility: "visible" });
}
else {
$('.scrollDownArrow').css({ visibility: "hidden" });
$('.scrollUpArrow').hide();
$('.scrollUpArrow').css({ visibility: "hidden" });
$(document).ready(resizingScrollbar);
}
}
else if (Retain == 0) {
rowCount = rowCount + varRetain;
if (rowCount > $('#contents').height()) {
$('.scrollDownArrow').css({ visibility: "visible" });
}
else {
$('.scrollDownArrow').css({ visibility: "hidden" });
$('.scrollUpArrow').hide();
$('.scrollUpArrow').css({ visibility: "hidden" });
$(document).ready(resizingScrollbar);
}
}
/*Code to toggle plus and minus sign*/
if ($('#retainMinusSignId').hasClass('minusSign')) {
$('#retainMinusSignId').addClass('plusSign').removeClass('minusSign');
}
else if ($('#retainMinusSignId').hasClass('plusSign')) {
$('#retainMinusSignId').addClass('minusSign').removeClass('plusSign');
}
}
else if (idTotoggleSubMenu == "activityreportstrId") {
/*Code to toggle submenu and make bottom scrolling arrow slide up and down*/
$('tr.activityreportstrClass').toggle(browserVar, function () { });
if (Activityreports == 1) {
rowCount = rowCount - activityreportsSubmnuHt;
if (rowCount > $('#contents').height()) {
$('.scrollDownArrow').css({ visibility: "visible" });
}
else {
$('.scrollDownArrow').css({ visibility: "hidden" });
$('.scrollUpArrow').hide();
$('.scrollUpArrow').css({ visibility: "hidden" });
$(document).ready(resizingScrollbar);
}
}
else if (Activityreports == 0) {
rowCount = rowCount + varActivityreports;
if (rowCount > $('#contents').height()) {
$('.scrollDownArrow').css({ visibility: "visible" });
}
else {
$('.scrollDownArrow').css({ visibility: "hidden" });
$('.scrollUpArrow').hide();
$('.scrollUpArrow').css({ visibility: "hidden" });
$(document).ready(resizingScrollbar);
}
}
/*Code to toggle plus and minus sign*/
if ($('#activityreportsMinusSignId').hasClass('minusSign')) {
$('#activityreportsMinusSignId').addClass('plusSign').removeClass('minusSign');
}
else if ($('#activityreportsMinusSignId').hasClass('plusSign')) {
$('#activityreportsMinusSignId').addClass('minusSign').removeClass('plusSign');
}
}
//setTimeout(function () {
callback.call();
//}, 400);
}
使用JQUERY.THEN 的代码
$('.trmenuClass').click(function () {
(collapseExpandMainMenu(this)).then(
function () { resetMenuPosition(); },
function () { alert("Please close and re-open the menu."); }
);
});
resetMenuPosition()的打开行
console.log('#menuTableId.height: ' + $('#menuTableId').css('height').replace(/px/g, ''));
alert('pause');
console.log('#menuTableId.height: ' + $('#menuTableId').css('height').replace(/px/g, ''));
您的collapseExpandMainMenu
需要返回一个$.Deferred()
(或promise)对象,并在完成时解析/拒绝。这里有一个简单的例子:
var collapseExpandMainMenu = function () {
var deferred = $.Deferred();
setTimeout(function () {
// some processing
deferred.resolve('success!');
}, 5000);
return deferred.promise();
};
$.when(collapseExpandMainMenu(this))
.done(function (message) {
console.log(message); // logs "success!" after 5 seconds
}
);
工作示例:http://jsfiddle.net/3sGZh/
附带说明:承诺是一种无法解决/拒绝的延期——你把它交给消费者,这样他们就可以对解决/拒绝做出回应,但不能自己执行。
只需使用回调:
$('.trmenuClass').on('click', function () {
collapseExpandMainMenu(this, function() {
console.log('success!'); // logs "success!" when animation completes
resetMenuPosition();
});
});
function collapseExpandMainMenu(elem, callback) {
//do your stuff first, then call the callback
$(elem).fadeIn(1000, function() {
callback.call(); //waits until animation is complete
});
}