Очистка и лучшего ответа AJAX


Я ниже скрипт на сайт работает на WordPress. Он очень тяжелый на анимации и использует AJAX для загрузки сообщений, а также загружать их в разд.

Три вещи, которые я хотел обратиться:

  1. Очистка код так что он работает быстрее/лучше

  2. Иногда AJAX-запрос не получит следующий пост и продолжает показывать тот же пост, или кратко показывает то следующий пост исчезает

  3. Анимация мыльные пузыри() оживляет в некоторых ДИВС с экрана, и закрыт с closeAggregator() функция. Иногда closeAggregator() функция не вызовет анимации в слайд дивс из поля зрения, и вместо этого просто исчезает. Что проблематично, потому что в следующий раз пузыри() функция срабатывает, ДИВС уже в поле зрения, таким образом: нет красивая анимация.

Я представляю много это из-за отсутствия чистоты/организация в сценарий. Просто надеялся, что кто-то может помочь немного прибраться!

//resize feeling font-size if word count is too high
function resizeFeeling(){
    var $quote = $(".feeling");
    var $numWords = $quote.text().split(" ").length;    
    if (($numWords >= 12) && ($numWords < 40)) {
        $quote.find('h1').css({
            'font-size' : '46px',
            'line-height' : '48px'
        });
            $quote.find('h2').css({
            'font-size' : '40px',
            'line-height' : '50px'
        });
    }   

};

//binding for key navigation
var pressedKeys = {};
var wtf = {
    'keydown': function (e) {
        if (pressedKeys[e.which])
            return;
            pressedKeys[e.which] = true;
        var keyCode = e.keyCode || e.which,
                key = {left: 37, right: 39, random: 83};

        switch (keyCode) {
            case key.left:
                        if ($('#post-nav .post-next a').length != 0) {
                            $('#keys .left-arrow').toggleClass('pressed');
                            $('#post-nav .post-next a').click();
                        } else { //if reach the beginning
                            $('#keys .left-arrow').toggleClass('pressed');

                            $('.boots').jrumble({rangeX: 5,rangeY: 0, rangeRot: 0, rumbleEvent: 'custom'});$('.boots').trigger('start_rumble');
                        }
                break;
            case key.right:
                if ($('#post-nav .post-previous a').length != 0) {
                    $('#keys .right-arrow').toggleClass('pressed');
                    $('#post-nav .post-previous a').click();
                } else { //if reach the end
                    $('#keys .right-arrow').toggleClass('pressed');

                    $('.boots').jrumble({rangeX: 5,rangeY: 0, rangeRot: 0, rumbleEvent: 'custom'});$('.boots').trigger('start_rumble');
                }
                break;
            //load a random feeling by pressing the 's' key (ie. shuffle)
            case key.random:
                $('#keys .shuffle').toggleClass('pressed');
                randomizeFeelings();
                break;
        }
    },
    'keyup': function (e) { 
        delete pressedKeys[e.which];
        var keyCode = e.keyCode || e.which,
                key = {left: 37, right: 39, random: 83 };

        switch (keyCode) {
            case key.left:
                $('#keys .left-arrow').toggleClass('pressed');
                $('.boots').trigger('stop_rumble');
                break;
            case key.right:
                $('#keys .right-arrow').toggleClass('pressed');
                $('.boots').trigger('stop_rumble');
                break;
            case key.random:
                $('#keys .shuffle').toggleClass('pressed');
                break;
        }
    }
};

//load up the welcome modal with the appropriate welcome message
function welcome() {    
    //Get the time of day
    var currentTime = new Date().getHours();

    //late
    if (0 <= currentTime&&currentTime < 5) {
        $('#heavyBoots h2').append("Hello my restless insomniac,");
    }
    //morning
    if (5 <= currentTime&&currentTime < 12) {
        $('#heavyBoots h2').append("Yawnnnn; good morning baby,");
    }
    //afternoon
    if (12 <= currentTime&&currentTime < 16) {
        $('#heavyBoots h2').append("Whatcha doin' dear?,");
    }
    //evening
    if (16 <= currentTime&&currentTime < 22) {
        $('#heavyBoots h2').append("Hello there,");
    }
    //late
    if (23 <= currentTime&&currentTime <= 24) {
        $('#heavyBoots h2').append("Hey, isn't it your bedtime?");
    }

    //Get the Day
    var day=new Date().getDay();
    switch (day)
    {
    case 0: //Sunday
      $('#heavyBoots p').append("It's a lazy Sunday.");
      break;
    case 1: //Monday
      $('#heavyBoots h2').html("Fuck Mondays.");
      break;
    case 5: //Friday
      $('#heavyBoots p').append("Also, it's Friday!");
      break;
    default: //Any other day
      $('#heavyBoots h2').append("");
    }

    //fade-in the background & then the welcome modal
    $('#home-bg').fadeIn(500, function(){
        $('#heavyBoots').animate({
            bottom: '50%'
        }, 500, 'easeInOutQuint');
    });

    //click to hide the welcome modal and load the first post (resize text if needed)   
    $('#heavyBoots a').live('click', function(){
        $(this).parent().parent().animate({
            bottom: '-150%'
        }, 500, 'easeInOutQuint', function(){
            $('#home-bg').fadeOut(200);
        });
        resizeFeeling();
        $('#content').delay(1500).fadeIn(600);
        $('.heavy h1').delay(1500).animate({
                left: '0%'
            },200, 'easeOutSine');

            $('.heavy h2').delay(1500).animate({
                right: '0%'
            },200, 'easeOutSine', function() {
                // fade-in bg if there
            $('#custom-bg').fadeIn(500);
            });

        //slide-down date
            setTimeout(function() {
                $('#logo').delay(1000).animate({
                    top: '20px'}, 300, 'easeInOutElastic', function(){
                $('.heavy h3 span').animate({
                top: '0px'
            },200, 'easeOutSine', function() {
                        // Animation complete.
                        $('#keys').animate({bottom: '20px'},300, 'easeInOutElastic');
            });
        });
        }, 1000);

        //call first post, activate feelings & bind keys
        $(document).bind(wtf);
            cycleFeelings();

    });
};

function relationshipAggregator() {
    //Remove current feeling from the view & slide out the keyboard legend
    $('.heavy h1').animate({
        left: '-150%'
        },200, 'easeInBack');

    $('.heavy h2').animate({
        right: '-150%'
        },200, 'easeInBack');

    $('#custom-bg').fadeOut(100);
    $('#content').fadeOut(600, function(){
        $('.heavy h3 span').animate({top: '-40px'});
    });
    $('#keys').animate({bottom: '-55px'},300, 'easeInOutElastic');

    //remove key binding to prevent user from accidentally changing the current feeling
    bubbles();
    $(document).unbind(wtf);
    //close the aggregator, bring back the feeling & rebind the keys
};

function closeAggregator() {
    $('#aggregator-close').animate({
            top: '-100px'
        }, 500, 'easeInOutElastic', function() {
            $('#bubble1').animate({
                left: '-150%'
            }, 1000, 'easeOutBack');

            $('#bubble2').animate({
                    top: '-150%'
            }, 1000, 'easeOutBack');

            $('#bubble3').animate({
                bottom: '-150%'
            }, 1000, 'easeOutBack');

            $('#bubble4').animate({
                bottom: '-150%'
            }, 1000, 'easeOutBack');

            $('#bubble5').animate({
                right: '-150%'
            }, 1000, 'easeOutBack');

            $('#bubble6').animate({
                top: '-150%'
            }, 1000, 'easeOutBack');

            $('#reddit').animate({
                bottom: '-150%'
            }, 1000, 'easeOutBack');
        }); 

    setTimeout( function() {
        $('#aggregator').fadeOut(200);
        $('.heavy h1').animate({
            left: '0%'
            },200, 'easeInBack');

        $('.heavy h2').animate({
            right: '0%'
            },200, 'easeInBack');

        $('#custom-bg').fadeIn(100);
        $('#content').fadeIn(600, function(){
            $('.heavy h3 span').animate({top: '0px'});
        });
        $('#keys').animate({bottom: '20px'},300, 'easeInOutElastic');
    }, 800);
    $(document).bind(wtf);
};

//NUMBERS & STUFF
function relationshipCount() {
    var visitTime = $('#visit_time').val();
    var relationshipTime = $('#relationship_time').val();
    var nextDate = new Date(visitTime+':00:00');
    var totalTime = new Date(relationshipTime);

    $("#visit").countdown({
        date: nextDate, //Counting down to a date
        offset: 1,
        hoursOnly: true,
        onChange: function(e,settings) {

        },
        onComplete: function( event ) {

            $(this).html('Right now');
        },
        leadingZero: true
    });

    $("#relationship").countdown({
        date: totalTime, //Counting up to a date
        offset: 1,
        htmlTemplate: "%{o} %{d}",
        hoursOnly: false,
        onChange: function(e,settings) {

        },
        onComplete: function( event ) {

            $(this).html('this should never complete');
        },
        leadingZero: true,
        direction: 'up'
    });
};

function bubbles(){
    $('#aggregator').fadeIn(200);
        comicScroll();
        $('#bubble1').animate({
            left: '50%'
        }, 1000, 'easeInBack');

        $('#bubble2').animate({
                top: '50%'
        }, 1000, 'easeInBack');

        $('#bubble3').animate({
            bottom: '50%'
        }, 1000, 'easeInBack');

        $('#bubble4').animate({
            bottom: '50%'
        }, 1000, 'easeInBack');

        $('#bubble5').animate({
            right: '50%'
        }, 1000, 'easeInBack');

        $('#bubble6').animate({
            top: '50%'
        }, 1000, 'easeInBack', function() {
            $('#aggregator-close').animate({
                top: '70px'
            }, 500, 'easeInOutElastic');
        });

        $('#reddit').animate({
            bottom: '50%'
        }, 1000, 'easeInBack');

    relationshipCount();
};

//the feeling is requested and loaded via AJAX
function cycleFeelings() {
    //grab the next post link and replace default action with ajax load
    $('#post-nav a').stop().live('click', function(e){
        e.preventDefault();
        //remove the current feeling from the view
        $('.heavy h1').animate({
            left: '-150%'
            },200, 'easeInBack');

            $('.heavy h2').animate({
                right: '-150%'
            },200, 'easeInBack');

        var link = $(this).attr('href');
        $('#custom-bg').fadeOut(100);
        $('#content').fadeOut(600, loadContent);  
      //bring in the loading modal
        $('#load').remove();
        $('body').append('<div id="load"><span><h4>Loading</h4><h5>feelings...</h5></span></div>').fadeIn(100); 
        $('#load').animate({
            top: '50%'
            }, 500, 'easeInOutElastic').fadeIn(400); 
        //load up the feeling div with the new feeling content 
        function loadContent() {  
            $('#content').load(link+' .heavy','',showNewContent())  
        }  
        //animate in the newly loaded feeling
        function showNewContent() {  
            setTimeout(function() {$('#content').fadeIn(600,hideLoader());
                resizeFeeling();
                $('.heavy h1').animate({
                left: '0%'
                },200, 'easeOutSine');

                $('.heavy h2').animate({
                    right: '0%'
                },200, 'easeOutSine', function() {
                        // fade-in bg if there
                        $('#custom-bg').fadeIn(500);                    

                        //slide-down date
                        setTimeout(function() {
                        $('.heavy h3 span').animate({
                    top: '0px'
                    },200, 'easeOutSine');
                    }, 500);    
                    }); 
            }, 1000);
        }
        //function to hide the loading modal
        function hideLoader() {  
            $('#load').animate({
                top: '-150%'
            }, 200, 'easeInBack').fadeOut(200);  
        }  
        return false;
    }).stop();
};

    //random feeling is requested and loaded via AJAX
    //TODO: merge with cycleFeelings() to remove redundancy in ajax request function
    function randomizeFeelings(){  
        //remove the current feeling from the view
        $('.heavy h1').animate({
            left: '-150%'
            },200, 'easeInBack');

            $('.heavy h2').animate({
                right: '-150%'
            },200, 'easeInBack');
        var toLoad = "/random-feeling/?cachebuster=" + Math.floor(Math.random()*10001);  
        $('#custom-bg').fadeOut(100);
        $('#content').fadeOut(600, loadContent);
        //bring in the loading modal  
        $('#load').remove(); 
        $('body').append('<div id="load"><span><h4>Loading</h4><h5>feelings...</h5></span></div>').fadeIn(100); 
        $('#load').animate({
            top: '50%'
            }, 500, 'easeInOutElastic').fadeIn(400);
        //load up the random feeling div with the new feeling content  
        function loadContent() {  
            $('#content').load(toLoad,'',showNewContent())  
        }
        //animate in the newly loaded random feeling
        function showNewContent() {  
            setTimeout(function() {$('#content').fadeIn(600,hideLoader()); 
                resizeFeeling();
                $('.heavy h1').animate({
                    left: '0%'
                    },200, 'easeOutSine');

                    $('.heavy h2').animate({
                        right: '0%'
                    },200, 'easeOutSine', function() {
                        // Animation complete.
                        $('#custom-bg').fadeIn(500);

                        //slide-down date
                        setTimeout(function() {
                        $('.heavy h3 span').animate({
                    top: '0px'
                    },200, 'easeOutSine');
                    }, 500);
                    });
            }, 1000);  
        }  
        //function to hide the loading modal
        function hideLoader() {  
            $('#load').animate({
                top: '-150%'
            }, 200, 'easeInBack').fadeOut(200);  
        }  
        return false;  

  };

//future option to have a physical button run the random feeling function
$('.feelings').click(randomizeFeelings);

//bind relationship aggregator to the click of the logo
$('#logo a').click(relationshipAggregator);

//close the aggregator
$('#aggregator-close a').click(closeAggregator);


/*  --------------------------
        RAGE COMIC MODAL
        --------------------------

        TODO: add/remove the div so it doesn't have to be hard-coded in header
*/

$('#reddit a').click(rageComics);

//bringing in the reddit rage comics modal
function rageComics() {
    //unbinding the key nav for the feelings
    $('#ragebox').fadeIn(200);
    //binding the new key nav for the comics
    $(document).bind(wtf2);
    //initializing the first rage comic from reddit
    nextRage();
};

function closeRage() {
        //reset the count so that the first rage comic is loaded on next opening of the reddit modal
        i = -1;
        //unbind the key nav for the comics
        $(document).unbind(wtf2);
        //fadeout the current rage comic so it's not shown on next opening of the reddit modal
        $('.rage-wrap').fadeOut(400);
        //fadout the reddit rage comic modal completely
        $('#ragebox').fadeOut(200);
        //rebind the key nav for the feelings
    }


//binding for rage comics key navigation
var pressedKeys2 = {};
var wtf2 = {
    'keydown': function (e) {
        if (pressedKeys2[e.which])
            return;
            pressedKeys2[e.which] = true;
        var keyCode = e.keyCode || e.which,
                key = {left: 37, right: 39};

        switch (keyCode) {
            case key.left:
                    prevRage();
                break;
            case key.right:
                    nextRage();
                break;

        }
    },
    'keyup': function (e) { 
        delete pressedKeys2[e.which];
        var keyCode = e.keyCode || e.which,
                key = {left: 37, right: 39};

        switch (keyCode) {
            case key.left:
                //stuff
                break;
            case key.right:
                //stuff
                break;
        }
    }
};




/*  --------------------------
        REDDIT JSON REQUEST
        --------------------------

        TODO: get the image url even if url is to imgur page
*/

//set the count
var i = -1;

//parse the json data
function rage(data) {
    var rageURL = data['data']['children'][i]['data']['url']; //the url
    var rageTitle = data['data']['children'][i]['data']['title']; //the title of the rage comic
    //the error variable
    var rageErr = '<div><h5>Whoops!</h5><h6>'+rageTitle+'</h6><a href="'+rageURL+'" target="_blank">try again in a new tab</a></div>';

    //append the image to the modal window
    $('#comic .rage-wrap').html('<img src="'+rageURL+'" />');
    //if the image loads, fade it in
    $('img').load(function() { 
        $('.rage-wrap').fadeIn(400); comicScroll();
    });
    //if the image fails to load, show the error message of the link & title
    $('img').error(function() { 
        $('#comic').removeClass('comic-loader');
        $('.rage-wrap').html(rageErr).fadeIn(400);
    });

};

//JSON request of the next rage comic
function nextRage() {
    if (i>=-1) {
        //increase the count by 1
        i++;
        //fadeout the current comic
        $('.rage-wrap').fadeOut(400);
        $('#comic').addClass('comic-loader');
        $.ajax({
          type: "GET",
          url: "http://www.reddit.com/r/fffffffuuuuuuuuuuuu/.json",
          dataType: "jsonp",
          jsonp: "jsonp",
          cache: true,
          success: rage //run the data^
      });
    }
};

function prevRage() {
    if (i>0) {
        //decrease the count by 1
        i--;
        //fadeout the current comic
        $('#comic').addClass('comic-loader');
        $('.rage-wrap').fadeOut(400);
        $.ajax({
          type: "GET",
          url: "http://www.reddit.com/r/fffffffuuuuuuuuuuuu/.json",
          dataType: "jsonp",
          jsonp: "jsonp",
          cache: true,
          success: rage //run the data^
      });
    }
};

//binding the previous rage comic button
$('.prev-rage a').click(prevRage);
//binding the next rage comic button
$('.next-rage a').click(nextRage);
//bind closing the modal to the close button
$('#closerage').click(closeRage);


/*  --------------------------
        LOGO & LOVE HOVER STATES
        --------------------------
*/
function hoverStates() {

    //Main Logo
    $('#logo').hover( function () {
      $(this).stop().animate({opacity : 1}, 100);     
  }, function () {  
      $(this).stop().animate({opacity : .6}, 100);       
  });

    //Love Icon (fill up)
    $('#love a').hover( function () {
        $(this).find('span').stop().animate({height:'0'},400, 'easeInSine');
    }, function () {
        $(this).find('span').stop().animate({height:'44px'},400, 'easeOutSine');
    });

    //Aggregator Close
    $('#aggregator-close').hover( function () {
      $(this).stop().animate({opacity : 1}, 100);     
  }, function () {  
      $(this).stop().animate({opacity : .6}, 100);       
  });
};


// usage: log('inside coolFunc', this, arguments);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function(){
  log.history = log.history || [];   // store logs to an array for reference
  log.history.push(arguments);
  if(this.console) {
    arguments.callee = arguments.callee.caller;
    var newarr = [].slice.call(arguments);
    (typeof console.log === 'object' ? log.apply.call(console.log, console, newarr) : console.log.apply(console, newarr));
  }
};

// make it safe to use console.log always
(function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,timeStamp,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();){b[a]=b[a]||c}})((function(){try
{console.log();return window.console;}catch(err){return window.console={};}})());


(function($) {
    $.fn.prettynumber = function(options) {
        var opts = $.extend({}, $.fn.prettynumber.defaults, options);
        return this.each(function() {
            $this = $(this);
            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
            var str = $this.html();
            $this.html($this.html().toString().replace(new RegExp("(^\\d{"+($this.html().toString().length%3||-1)+"})(?=\\d{3})"),"$1"+o.delimiter).replace(/(\d{3})(?=\d)/g,"$1"+o.delimiter));
        });
    };
    $.fn.prettynumber.defaults = {
        delimiter       : ','   
    };
})(jQuery);


1443
0
задан 27 октября 2011 в 03:10 Источник Поделиться
Комментарии
2 ответа

Вы всегда должны кэширование селекторов, даже если они используются только один раз.

Например: ВАР $посетить = $("#визит"); и т. д.

2
ответ дан 27 октября 2011 в 04:10 Источник Поделиться

Я посмотрел только первую часть вашего приветствия() функции:

Во-первых у вас несколько $('#heavyBoots Р').добавить( тип звонка, если вам нужно изменить его, вы будете иметь несколько мест для изменения. Я поставил приветствия /комментария в переменной и += (для .функции append()) или = (для .формате HTML()). Это чище, ИМХО.

Также я хотел бы спросить, где вы положите еще, если инструмент. У вас несколько "если" заявления, которые могут быть объединены в одну иначе, если. Это означает, что, когда он находит один, он не должен оценивать больше любого из них, и это имеет дополнительное преимущество, нуждающихся только один тест.

Была избыточной по умолчанию: в случае вашего коммутатора, который, казалось, ничего не добавить ("")на страницу.

function welcome() {
//Get the time of day
var currentTime = new Date().getHours();

var greeting = "";
var comment = "";

if (currentTime < 0) {
greeting = "Current Time is Negative. The World doesn't exist yet.";
}
else if (currentTime < 5) {
//late
greeting = "Hello my restless insomniac,";
}
else if (currentTime < 12) {
//morning
greeting = "Yawnnnn; good morning baby,";
}
else if (currentTime < 16) {
//afternoon
greeting = "Whatcha doin' dear?,";
}
else if (currentTime < 22) {
//evening
greeting = "Hello there,";
}
else if (currentTime <= 24) {
//late
greeting = "Hey, isn't it your bedtime?";
}
else
{
greeting = "The World has ended or someone added more hours in the day.";
}

//Get the Day
var day = new Date().getDay();
switch (day) {
case 0:
//Sunday
comment = "It's a lazy Sunday.";
break;
case 1:
//Monday
greeting = "Fuck Mondays.";
break;
case 5:
//Friday
comment = "Also, it's Friday!";
break;
}

$('#heavyBoots p').append(comment);
$('#heavyBoots h2').append(greeting);

1
ответ дан 5 декабря 2011 в 12:12 Источник Поделиться