最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jQuery html() Chained with Other Functions Timing Issue - Stack Overflow

programmeradmin2浏览0评论

I've noticed this a lot but it's finally starting to bug me (pardon the pun). When I chain html() with other functions, it seems like html() runs first regardless. For example:

$("#news .inner").hide("slide", { direction: strOpposite }, 500).delay(1000).html(strData).show("slide", { direction: strDirection }, 500);

Even adding a delay() to it as shown doesn't seem to solve the problem. This line is part of a page flipping effect I implemented for the news archive section of a website. Any ideas? Thanks.

I've noticed this a lot but it's finally starting to bug me (pardon the pun). When I chain html() with other functions, it seems like html() runs first regardless. For example:

$("#news .inner").hide("slide", { direction: strOpposite }, 500).delay(1000).html(strData).show("slide", { direction: strDirection }, 500);

Even adding a delay() to it as shown doesn't seem to solve the problem. This line is part of a page flipping effect I implemented for the news archive section of a website. Any ideas? Thanks.

Share Improve this question edited Jan 22, 2012 at 1:27 Gabriel Ryan Nahmias asked Jan 22, 2012 at 1:21 Gabriel Ryan NahmiasGabriel Ryan Nahmias 2,1592 gold badges26 silver badges39 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 3

When you chain a lot of methods together they will be executed in the order they are chained, but animation methods add to the animation queue and the actual animation happens later (in order).

As I understand it, the .delay() method only delays things in the animation queue. The .html() method is not an animation thing.

If it is your intention for the .html() call to occur after the .hide() method pletes then you should put it in the plete callback provided by the .hide() method.

So, assuming you want to hide, then change the html, then show, you can do this:

$("#news .inner").hide("slide", { direction: strOpposite }, 500,
                       function() { $(this).html(strData); })
                 .show("slide", { direction: strDirection }, 500);

Demo: http://jsfiddle/BnFyb/

The "effects" that jQuery does gets added to an effect queue as opposed to non-effect-like calls (.html()) which don't and are therefore done immediately.

You can try adding it to a callback function though like so:

$("#news .inner").hide("slide", { direction: strOpposite }, 500).delay(1000, function() {
    $(this).html(strData)
}).show("slide", { direction: strDirection }, 500);

Or you may be trying to do this:

$("#news .inner").hide(500, function() {
    $(this).html(strData); 
}).delay(1000).show("slide", { direction: strDirection }, 500);

BTW I think your hide() and show() calls aren't syntactically correct. You should check out .hide() and .show() on the jQuery API

Delay is for action queue (animate(),slideUp(), etc...) and does not effect the daisy chain sequencing for non effects. You can use callbacks to achieve true delay for $.html();

$(selector).animate({marginTop:0},500,function() {
    $(this).html("CHANGE ME");
});

effects like hiding and showing elements get added to an effects queue. Adding to the queue does happen instantly, as does setting a delay on a queue. Html function happens instantly too.

the delay function doesnt actually delay the calling of the next function in the chain. by default, without a 2nd parameter it delays the FX queue.

If you want to get around this you can either create your own queue using the jQuery.queue functions ( http://api.jquery./jQuery.queue/ ) or more simply use the standard setTimeout functions ( https://developer.mozilla/en/DOM/window.setTimeout )

Alternatively you could also use the plete callbacks of the hide function to continue your chain

发布评论

评论列表(0)

  1. 暂无评论