Why this is executed twice?

Question

I have code like this:

$(document).ready(function() {

    $("div #covert, div #coverb").height($(window).height() / 2 + 1);
    $(window).resize(function() {
        $("div #covert, div #coverb").height($(window).height() / 2 + 1);
        covconcr();
    });

    function covconcr() {
        $('div #covercon').css('left', $(window).width() / 2 - $('#covercon').width() / 2);
    }

    covconcr();

    function hidecover() {
        var goup = $('div #covert').height();
    }

    $("div #covercon").fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast").fadeOut("fast").fadeIn("fast").fadeOut("fast").delay(100).fadeIn("fast", function() {
        $(this).stop();
    });

    $('title').html('Drink86_browser.detection');

    var logoop;

    jQuery.each(jQuery.browser, function() {
        if ($.browser.msie) {
            $('div #covercon').delay(3000, function() {
                $(this).html("YOUR BROWSER IS: INTERNET EXPLORER.");
                $('title').html('Drink86_your.browser.is.internet.explorer');
            });
        }
        else if (!$.browser.msie) {
            function update() {
                //$('#site').load('site.php');
                $('div #covercon').html("YOUR BROWSER IS: " + jQuery.uaMatch(navigator.userAgent).browser + ".");
                covconcr();
                $('title').html('Drink86_your.browser.is.' + jQuery.uaMatch(navigator.userAgent).browser + ' ');

                function hidecov() {
                    $('title').html('Drink86_loading_files');
                    $('#covercon').html($('#loading').html());
                    covconcr();
                    var timer = setInterval(function() {
                        $("#loadingpro").html(Math.round($("#progress").width() / 4) + "%");
                    }, 20);
                    $("#progress").animate({
                        width: 400
                    }, 2000, function() {
                        $('title').html('Drink86_');
                        clearInterval(timer);
                        $('#covercon').delay(700).fadeOut('fast', function() {
                            //    if(logoop!="yes"){
                            $('#logobig').css('left', $(window).width() / 2 - $('#logobig').width() / 2).css('top', $(window).height() / 2 - $('#logobig').height() / 2);
                            $('#logobig').fadeIn(3000).delay(2500).fadeOut(3000);
                            logoop = "yes";
                            // }
                        });
                    });
                }
                setTimeout(hidecov, 1000);
            }
            setTimeout(update, 3100);
        }
    });
});

operation with #logobig (fadeIn and fadeOut) is executed twice. why? i had previous issues similiar to those but then they were executed twice just in Firefox. any ideas why?

Answer 1

What exactly were you thinking with

jQuery.each(jQuery.browser, function() { ...

That really makes no sense. Just look at jQuery.browser (if you must).

Also, checking to see if it's IE in an "if" statement, and then if it's not IE in the "else" part, well, again ...

The direct answer to your question is that jQuery.browser probably has two things in it, so you do that stuff twice.

Answer 2

I think your problem is that you are iterating through the collection of jQuery's browser flags, which is not necessary to accomplish what you are doing. If you were looking at the page in Firefox, the second clause of your if/elseif would execute on every loop, since the value never changes. Try removing that function from the each loop, so that it just looks like this:

if ($.browser.msie) {
    $('div #covercon').delay(3000, function() {
        $(this).html("YOUR BROWSER IS: INTERNET EXPLORER.");
        $('title').html('Drink86_your.browser.is.internet.explorer');
    });
} else if (!$.browser.msie) {
    function update() {
        //$('#site').load('site.php');
        $('div #covercon').html("YOUR BROWSER IS: " + jQuery.uaMatch(navigator.userAgent).browser + ".");
        covconcr();
        $('title').html('Drink86_your.browser.is.' + jQuery.uaMatch(navigator.userAgent).browser + ' ');

        function hidecov() {
            $('title').html('Drink86_loading_files');
            $('#covercon').html($('#loading').html());
            covconcr();
            var timer = setInterval(function() {
                $("#loadingpro").html(Math.round($("#progress").width() / 4) + "%");
            }, 20);
            $("#progress").animate({
                width: 400
            }, 2000, function() {
                $('title').html('Drink86_');
                clearInterval(timer);
                $('#covercon').delay(700).fadeOut('fast', function() {
                    //    if(logoop!="yes"){
                    $('#logobig').css('left', $(window).width() / 2 - $('#logobig').width() / 2).css('top', $(window).height() / 2 - $('#logobig').height() / 2);
                    $('#logobig').fadeIn(3000).delay(2500).fadeOut(3000);
                    logoop = "yes";
                    // }
                });
            });
        }
        setTimeout(hidecov, 1000);
    }
    setTimeout(update, 3100);
}

Answer 3

I'm not the best with Javascript, so I might be totally off on this, but it looks like hidecov could be running when update is called, then again when the 1 second has passed.

Using firebug with a breakpoint inside hidecov should point to when it's getting run.

Answer 4

You call setTimeout(hidecov, 1000) inside update(), and then setTimeOut(update, 3100) outside of update, so hidecov will be called once after 1000ms, then update will be called in 3100ms, and in there it will do another setTimeout on hidecov in 1000ms.

I'm not sure what all of this code is trying to do so I can't tell you how to change it, but I can see why hidecov is called twice.

Answer 5

jQuery.each(jQuery.browser

Don't loop through each item in the 'browser' object. I suspect there are more than one that are !$.browser.msie