Add ability to add function into an existing custom waypoints function

Question

Hello I have created a custom waypoint function which works well but I would like the ability to be able to add a function to it.

Here is the working custom waypoint function:

function createWaypoint (triggerElementId, animatedElement, className, offsetVal) {
    var waypoint = new Waypoint({
        element: document.getElementById(triggerElementId),
        handler: function(direction) {
            if (direction === 'down') {
                jQuery(animatedElement).addClass(className);
                this.destroy();
            }
        },
        offset: offsetVal
    });
}

//Waypoint Instances
createWaypoint("x", ".y", "z", 500);

Next I would like the add the ability to add a function to the if statement and here is what I came up with:

function createWaypoint (triggerElementId, animatedElement, className, offsetVal, functionName) {
    var waypoint = new Waypoint({
        element: document.getElementById(triggerElementId),
        handler: function(direction) {
            if (direction === 'down') {
                jQuery(animatedElement).addClass(className);
                functionName();
                this.destroy();
            }
        },
        offset: offsetVal
    });
}

function test() {
    alert('Hello World');
}

//Waypoint Instances
createWaypoint("x", ".y", "z", 500);
createWaypoint("x", null, null, null, test);

I added the functionName on line 1 and 7. Then I tried to call it on the very last line. The function "test" does not trigger and I get the error:

Uncaught TypeError: functionName is not a function.

Can anyone help out with this?

Thanks!

Zlatan Omerović · Accepted Answer · 2017-06-14T18:07:18.417

Try this with .call or .apply (more about them two):

function createWaypoint (triggerElementId, animatedElement, className, offsetVal, functionName) {
    var waypoint = new Waypoint({
        element: document.getElementById(triggerElementId),
        handler: function(direction) {
            if (direction === 'down') {
                jQuery(animatedElement).addClass(className);

                if(typeof functionName === 'function') {
                    functionName.call();
                } else {
                    console.log('functionName parameter is not a function.');
                }

                this.destroy();
            }
        },
        offset: offsetVal
    });
}

function test() {
    alert('Hello World');
}

//Waypoint Instances
createWaypoint("x", ".y", "z", 500);
createWaypoint("x", null, null, null, test);

EDIT: Actually, you should use functionName.call(undefined) or pass a this parameter from the scope of the function of your desire. It can be from the callback of the handler function, or from the createWaypoint, ie. functionName.call(this) or functionName.call(mappedThis).

As MDN documentation states:

thisArg — The value of this provided for the call to a function. Note that this may not be the actual value seen by the method: if the method is a function in non-strict mode , null and undefined will be replaced with the global object and primitive values will be converted to objects.

so basically just change `functionName.call();` to `functionName.call(this);` ? @omerowitz — cup_of, Jun 15 '17 at 21:14
Yes. Or pass `undefined` or `null` which will use the scope of the app/root. — Zlatan Omerović, Jun 16 '17 at 07:18

Add ability to add function into an existing custom waypoints function

1 Answers1