Weird JavaScript code that can't live without console.log()

I got this very weird code: No debug, no work! I am almost crazy about it.

The code is to show an notification in Chrome. That's lot of comments among the code.

Look at the !!IMPORTANT&&WEIRD!!, next line is "console.log(_notification);" that can't be omitted, if it does, no events bind could work.

Though now the code works OK, but I just curious about this, why I can't remove "console.log(_notification);" ?

    /**
     *  Notification
     *  @author:    ijse
     *  @require:   Chrome10+
     *  @params:    same as webkitNotifications.create[HTML]Notification()
     *  @usage:
     *      new Notify("http://www.baidu.com").onshow(function() {
     *              alert("show");
     *          }).onclose(function() {
     *              alert("close");
     *          }).show();
     */
    var Notify = function() {
        var _params = arguments;
        // Validate arguments
        if(_params.length == 0) {
            console.error("Notify need at least one argument");
            return ;
        }
        // Check browser support
        if(!window.webkitNotifications) {
            console.error("Your browser does not support webkitNotifications feature!!");
            return ;
        }

        var _onclose, _onclick, _onerror, _onshow;
        var _notification, _replaceId, _showFlag = false;

        function bindEvents() {
            // Add event listeners
            // In W3C, display event is called show
            _notification.addEventListener("display", _onshow, false);
            _notification.addEventListener("click", _onclick, false);
            _notification.addEventListener("error", _onerror, false);
            _notification.addEventListener("close", _onclose, false);

            if(_replaceId)
                _notification.replaceId = _replaceId;
            // !!IMPORTANT&&WEIRD!! remove next line no events will work
            console.log(_notification);
        }
        function createfn(permission) {
            // About permission on Chrome:
            //      PERMISSION_ALLOWED (0) indicates that the user has granted permission to scripts with this origin to show notifications.
            //      PERMISSION_NOT_ALLOWED (1) indicates that the user has not taken an action regarding notifications for scripts from this origin.
            //      PERMISSION_DENIED (2) indicates that the user has explicitly blocked scripts with this origin from showing notifications.
            if(permission == 0) {
                // If permission is allowed
                // Create notification
                if(_params.length == 1)
                    _notification = window.webkitNotifications.createHTMLNotification(_params[0]);
                else
                    _notification = window.webkitNotifications.createNotification(_params[0],_params[1],_params[2]);

                // Bind events
                console.log("bind event in createfn");
                bindEvents();

                // Show, if yes flag
                !!_showFlag && _notification.show();
            } else {
                if(_onerror)
                    _onerror.call(this);
                console.error("Notification permission is denied!!");
            }
        }

        // If permission already allowed, do not require again
        if(window.webkitNotifications.checkPermission() != 0) {
            // Require permission from user
            window.webkitNotifications.requestPermission(function() {
                createfn.call(this, window.webkitNotifications.checkPermission());
            });
        } else {
            createfn.call(this, window.webkitNotifications.checkPermission());
        }

        // Return handler methods
        return {
            onclose: function(fn) { _onclose = fn; console.log(1); return this; },
            onclick: function(fn) { _onclick = fn; console.log(2); return this; },
            onerror: function(fn) { _onerror = fn; console.log(3); return this; },
            onshow : function(fn) { _onshow  = fn; console.log(4); return this; },

            show: function(replaceId) {
                console.log("method show");
                _replaceId = replaceId;
                if(_notification) {
                    // Notification already been created
                    bindEvents();
                    _notification.show();
                } else {
                    // Flag yes to show
                    _showFlag = true;
                }
                return _notification;
            },
            cancel: function() {
                _notification.cancel();
            }
        } // return handler
    }


    new Notify("","Success!!", "Welcome to use empcy!!").onshow(function() {
        var that = this;
        window.setTimeout(function() { that.cancel(); }, 3000);
    }).onclose(function() {
        alert("close");
    }).onclick(function() {
        alert("clicked");
    }).show("Welcome");

Answers


I think it might be an issue with bracketing. Here is the relevant section of code as you have it:

    function bindEvents() {
        // Add event listeners
        // In W3C, display event is called show
        _notification.addEventListener("display", _onshow, false);
        _notification.addEventListener("click", _onclick, false);
        _notification.addEventListener("error", _onerror, false);
        _notification.addEventListener("close", _onclose, false);

        if(_replaceId)
            _notification.replaceId = _replaceId;
        // !!IMPORTANT&&WEIRD!! remove next line no events will work
        console.log(_notification);
    }

If you remove the console.log line it becomes:

    function bindEvents() {
        // Add event listeners
        // In W3C, display event is called show
        _notification.addEventListener("display", _onshow, false);
        _notification.addEventListener("click", _onclick, false);
        _notification.addEventListener("error", _onerror, false);
        _notification.addEventListener("close", _onclose, false);

        if(_replaceId)
            _notification.replaceId = _replaceId;
    }

which is probably confusing the JavaScript engine since you have a bracket-less if statement but it's followed by a closing bracket. You should try adding brackets to your if statement so it looks like:

    function bindEvents() {
        // Add event listeners
        // In W3C, display event is called show
        _notification.addEventListener("display", _onshow, false);
        _notification.addEventListener("click", _onclick, false);
        _notification.addEventListener("error", _onerror, false);
        _notification.addEventListener("close", _onclose, false);

        if(_replaceId) {
            _notification.replaceId = _replaceId;
        }
    }

Need Your Help

jQuery isotope initialize with filtered results

jquery jquery-isotope

Hi I'm using jQuery Isotope and I have a filter like this:

How to slide images from arrayList in android

android animation arraylist ontouchlistener

I am having an arrayList of Imageurls and want to slide it one by one when user slides image second image should dsplay,I have tried as belo but I only able to change when i touch,It changes on tou...