How to pass jQuery function as a callback?

Question

Below is the first part of my function where direction is currently an integer used to determine whether to use .prev() or .next().

Is there a way to pass prev or next as the parameter direction?

function nextImage(direction) {
  var id = $('#current-image').attr('data-id');

  if(direction < 0) {
    var ele = $('#' + id).prev();

    if(ele.length == 0)
      ele = $('#' + id).siblings().last();
  }
  if(direction > 0) {
   var ele = $('#' + id).next();

   if(ele.length == 0)
      ele = $('#' + id).siblings().first();
  }

I feel as though this may not be possible, I have looked at quite a few other resources to try and solve this, though maybe my wording prevented me from finding the solution.

Can you clarify what you mean by ‘Is there a way to pass prev or next as paramater’? What is it you want to pass as next/prev? Function, string name, variable — rayepps, Nov 12 '17 at 06:48
See [“Variable” variables in Javascript?](https://stackoverflow.com/questions/5187530/variable-variables-in-javascript) — kmoser, Nov 12 '17 at 06:50

T.J. Crowder · Accepted Answer · 2017-11-12T06:58:14.013

2

Is there a way to pass prev or next as the parameter direction?

Yes. Functions are objects, you can pass them around. In your case, though, you'd have to pass both prev/next and first/last, which starts to get a bit unwieldy:

function nextImage(move, pick) {
    var id = $('#current-image').attr('data-id');
    var ele = move.call($('#' + id));
    if (ele.length == 0) {
        ele = pick.call($('#' + id).siblings());
    }
}

And

nextImage($.fn.prev, $.fn.last);

Note the use of Function#call to make the call so that this refers to the jQuery object we want the call to operate on.

Another option is to pass their names and use brackets notation:

function nextImage(move, pick) {
    var id = $('#current-image').attr('data-id');
    var ele = $('#' + id)[move]();
    if (ele.length == 0) {
        ele = $('#' + id).siblings()[pick]();
    }
}

And

nextImage("prev", "last");

Alternately, you might have those in an object and just pass in a key:

var nextImageFunctions = {
    "next": {
        move: $.fn.next,
        pick: $.fn.first
    },
    "prev": {
        move: $.fn.prev,
        pick: $.fn.last
    }
};
function nextImage(direction) {
    var functions = nextImageFunctions[direction];
    var id = $('#current-image').attr('data-id');
    var ele = functions.move.call($('#' + id));
    if (ele.length == 0) {
        ele = functions.pick.call($('#' + id).siblings());
    }
}

and

nextImage("prev");

edited Nov 12 '17 at 06:58

answered Nov 12 '17 at 06:54

T.J. Crowder

1,031,962
187
1,923
1,875

Sexy use of ‘call’. I honestly couldn’t think of how to do this, nice answer. – rayepps Nov 12 '17 at 06:57
Perfect, though it is unnecessary in this case, I asked largely so I could learn. Would it be possible to pass both `.prev()` and `.last()` in JSON? E.g. `{'direction':$.fn.prev(), 'fallback':$.fn.last()}`? – CS Dude Nov 12 '17 at 07:02
@OliverGiess: Yes, but 1. You don't want the `()` because you don't want to *call* the function at that point, you just want to refer to it. 2. You don't need those quotes on the property names (you only need them when the name has spaces or other chars that aren't valid identifier characters), and 3. Note that's not JSON (and if it were, it would be invalid JSON). JSON is a *textual notation* for data exchange. [(More here.)](http://stackoverflow.com/a/2904181/157247) If you're dealing with JavaScript source code, and not dealing with a *string*, you're not dealing with JSON. – T.J. Crowder Nov 12 '17 at 07:16
1

@OliverGiess: So: `nextImage({direction: $.fn.prev, fallback: $.fn.last});` and in `nextImage`, you'd use them as `x.direction.call(...)` and `x.fallback.call(...)` where `x` is the name of the parameter you declare to receive them. – T.J. Crowder Nov 12 '17 at 07:17

score -1 · Answer 2 · answered Nov 12 '17 at 06:46

-1

Like this?

function nextImage(direction, callBack) {
    if (direction > 0) {
        // do stuff
    } else {
        // do other fun stuff
    }

    if (callBack) callBack()
}

Usage

// No callback
nextImage(direction);

// Callback
nextImage(direction, $('#div-to-change').html('Next image was run'));

answered Nov 12 '17 at 06:46

ethancrist

114
7

2

The OP asked about passing ``direction`` as a callback, not an integer. – kmoser Nov 12 '17 at 06:48
He's already using direction as an integer. You mean he's asking if he can use `direction` as an integer in the if statement then `direction` within the if statement as a callback at the same time? That's a pretty whacky setup if so. – ethancrist Nov 12 '17 at 06:52
I wanted to be able to pass`.prev()` or `.next()` so I could remove the `if` statements. – CS Dude Nov 12 '17 at 06:55

How to pass jQuery function as a callback?

2 Answers2