Question

I’m running a touch event test with Modernizr, the test seems to be running fine, but still a function I’m calling only if the test is successful it’s called.

This is the test :

Cluster.prototype.test_touch_event_support = function(callback) {
    return (Modernizr.touch) ? callback : log("Touch Support Undetected");
};

And this is the function that should run only if the test is successful :

Cluster.prototype.initiate_shop_touch_events = function() {
    var self = this;
    return $("#" + this.shop_wrapper_id).hammer({prevent_default: true, drag_min_distance: Math.round(this.viewport_width * 0.1)}).bind("drag", function(ev) {
        var data = JSON.parse(self.get_local_storage_data(self.shop_data_key));
        var step = (ev.direction == "left") ? 1 : -1;
        var new_page = parseInt(data.current_page + step);
        return (new_page > 0 && new_page <= data.total_pages) ? $(self.shop_navigation_class).jPages(new_page) : false;
});
};

And I’m checking like so, even though it doesn’t depend on the argument I’m passing to the test :

self.test_touch_event_support(self.initiate_shop_touch_events());

Can someone tell me why the function is still running ? Because I also get in the console the message that touch events are not supported.

Answer 1

self.test_touch_event_support(self.initiate_shop_touch_events());

will pass the result of calling self.initiate_shop_touch_events to self.test_touch_event_support

You need to do :

self.test_touch_event_support(self.initiate_shop_touch_events);

To pass the function.

In

Cluster.prototype.test_touch_event_support = function(callback) {
    return (Modernizr.touch) ? callback : log("Touch Support Undetected");
};

You need to call the callback not reference it.

Cluster.prototype.test_touch_event_support = function(callback) {
    return (Modernizr.touch) ? callback.call (this) : log("Touch Support Undetected");
};

Lessons to take away:

1. Understand the difference between calling a function and referencing it. Unlike in many programming languages, functions in JavaScript are first class entities. Your can pass around references to them by invoking their name. To invoke, call or execute a function you must specify a, possibly empty, list of arguments enclosed in brackets immediately after the function reference.
2. When invoked, all functions are passed a context parameter referenced using the word this in the function body. This is often specified by preceding the function name with an object reference e.g. obj.func (123) On this call the object obj will be used each time the function body references this. With this usage, the function must be a defined method of the object. The call and apply methods of functions can be used to explicitly specify this context argument : func.call (obj, 123) is the equivalent to the above when func is not a method of obj.

More details can be found here https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function