Call JavaScript function in a jQuery chain

Question

function jsFunc() {
  alert('i am js!');
}

$('#node').slideDown().call(jsFunc());

Of course, the function isn't called 'call'.

** EDIT **

(Added solution on behalf of the OP).

Solution

http://jsfiddle.net/gx2mJ/1/

or

HTML:

<div id="content">
    <p class="article">
        this is an article
    </p>
</div>

JavaScript:

function callBack() {
    $("#content .article").html("the callback has been called");
}

$(document).ready(function() {
    $("#content .article").slideUp(0);

    $("#content .article").each(function(i) {
        $(this).delay(i*250).slideDown(function(){
             //if ($("#content .article:animated").length < 1) {
                  callBack();
             //}
        });
    });
});

Why would you want to do that? Maybe there's a better way to do whatever you're trying to do. — casablanca
– casablanca, Commented Oct 11, 2010 at 3:23
Meh, just using setTimeout for now. Not the way I wanted to go, but it works. — Jacksonkr
– Jacksonkr, Commented Oct 11, 2010 at 3:45

Cristian Sanchez · Accepted Answer · 2010-10-11 03:23:06Z

3

You can't do that by default, but you could easily add it as a plugin:

$.fn.call = function (fn, args, thisp) {
    fn.apply(thisp || this, args);
    return this; // if you want to maintain chainability -- other wise, you can move the return up one line..
}

Though I'm not sure why you would want to do that. If you're thinking it won't be run until after the slide is done, then you'd be wrong because jQuery animations are asynchronous.

answered Oct 11, 2010 at 3:23

Cristian Sanchez

32.4k11 gold badges59 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

helloandre · Accepted Answer · 2010-10-11 03:24:24Z

1

why not just use a callback function? almost all jquery functions have them.

$('#node').slidedown('normal', function(){jsFunc()})

answered Oct 11, 2010 at 3:24

helloandre

10.8k9 gold badges50 silver badges64 bronze badges

2 Comments

Moak Over a year ago

$('#node').slidedown('normal', jsFunc)

helloandre Over a year ago

well, the anon func at the end allows for actually putting the alert() in it instead of making the function call.

Community · Accepted Answer · 2017-05-23 12:00:45Z

1

$("#content article").each(function(i) {
    $(this).delay(i*250).slideDown();
}).callBack();

The whole reason for having the callback in the chain is so it will run AFTER all the animations have taken place.

try this instead,

$("#content .article").each(function(i) {
    $(this).delay(i*250).slideDown(function(){
         if ($("#content .article:animated").length < 1) {
              callBack();
         }
    });
});

the same problem

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Oct 11, 2010 at 5:35

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

Comments

Arun P Johny · Accepted Answer · 2010-10-11 03:31:40Z

0

What is your objective of calling the jsFunc()?

If you want it as a callback you can use the sysntax given here ex:

$('#node').slidedown('normal', function(){jsFunc()}).

But if you want the function jsFunc to be able to call as a plugin, you need to write a plugin as suggested by CD Sanchez.

I think again there is one issue in your sample code, you are calling the function jsFunc and passing the value returned by jsFunc as an argument to the call function. If you want to pass the function jsFunc as the callback function you need to use the syntax

$('#node').slideDown().call(jsFunc);

answered Oct 11, 2010 at 3:31

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

halfer · Accepted Answer · 2017-08-26 10:25:51Z

0

(Added solution on behalf of the OP).

Solution

http://jsfiddle.net/gx2mJ/1/

or

HTML:

<div id="content">
    <p class="article">
        this is an article
    </p>
</div>

JavaScript:

function callBack() {
    $("#content .article").html("the callback has been called");
}

$(document).ready(function() {
    $("#content .article").slideUp(0);

    $("#content .article").each(function(i) {
        $(this).delay(i*250).slideDown(function(){
             //if ($("#content .article:animated").length < 1) {
                  callBack();
             //}
        });
    });
});

answered Aug 26, 2017 at 10:25

community wiki

halfer

Comments

Jacksonkr · Accepted Answer · 2017-08-28 22:29:52Z

-1

$("#content article").each(function(i) {
    $(this).delay(i*250).slideDown();
}).callBack();

The whole reason for having the callback in the chain is so it will run AFTER all the animation triggers have taken place.

edited Aug 28, 2017 at 22:29

answered Oct 11, 2010 at 3:32

Jacksonkr

32.3k42 gold badges190 silver badges290 bronze badges

4 Comments

Cristian Sanchez Over a year ago

Are you answering your own question?

halfer Over a year ago

It isn't clear if this is an answer or an addendum to the question. Would you clarify, Jacksonkr? If you do not remember, I would suggest deleting this, since you have another answer that you were happy with (I have moved it from the Q to an answer in its own right).

Reigel Gallarde Over a year ago

no, running it on chain will not make it run after animations have taken place.

Jacksonkr Over a year ago

@Reigel The wording was misleading. I meant animation triggers not animation cycles. Thanks for bringing this to my attention.

Collectives™ on Stack Overflow

Call JavaScript function in a jQuery chain

Solution

6 Answers 6

Comments

2 Comments

Comments

Comments

Solution

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Solution

6 Answers 6

Comments

2 Comments

Comments

Comments

Solution

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related