Question

Does any one know why this is not working?

http://jsfiddle.net/jonevar/2Z2NQ/5/

Here is the whole code:

function ag_alert(message) {

    event.preventDefault();

    //SetTimeout in case didn't close manualy
    var timer = setTimeout(cls_message, 5000),
        cur_url = window.location.href;

    //Check if its already on
    if (! $('.ag_alert_wrapper').is(':visible') ) {

        //Set the language
        (cur_url.indexOf('/en/') >= 0) ? cls_txt = "close" : cls_txt = "閉じる" ;

        $('<div class="ag_mess ag_alert_wrapper"></div><div class="ag_mess ag_alert_wrapper_close">'+ cls_txt +'</div>')
            .prependTo('body');
        $('.ag_alert_wrapper')
            .append('<p>'+ message +'</p>')
            .animate({top : 0}, 200, function() {
                $('.ag_alert_wrapper_close')
                .animate({top : 90}, 200)
                .on({
                    mouseenter : function () {
                        $(this).animate({
                            top : 100
                        }, 200);
                    },
                    mouseleave : function () {
                        $(this).animate({
                            top : 90
                        }, 200);
                    },
                    click : function () {
                        cls_message();
                    }
                });
            });

        //Setups ESC key to close message
        $(document).keydown(function(e) {
            if (e.keyCode === 27) {
                cls_message();
            }
        });

    } else {
        //if Alert is already visible
        $('.ag_alert_wrapper')
            .children('p').html(message)
            .end()
            .effect("highlight", {
                color : '#FF0'
            }, 1000);

        clearTimeout(timer);
    }

}


function cls_message() {
    $('.ag_mess').animate({
        top : -200
    }, 200, function () {
        $('.ag_mess').remove();
    });
}

Answer 1

This seems to be working fine, test code (using jQuery, but that’s not changing the conclusion):

html

<div id="msgs"></div>

js

function other_function() {
    $('#msgs').append('other ');   
}

function do_something(data) {
    var timer = setTimeout(other_function, 500);
    if (data === "condition") {
        $('#msgs').append('hi ');
    } else {
        $('#msgs').append('clearing ');
        clearTimeout(timer);
    }
}

do_something('yay');

do_something('condition');

Outputs this to the div:

clearing hi other

as expected. Live example:

• http://jsfiddle.net/mCdxV/

Hope this helps.