幻燈片代碼的可重用

Question

我創建一個jQuery幻燈片和它工作沒有問題，但是這件事情是竊聽我...正如你可以看到我已經創建了兩個BIG和FAT功能，它們是IDENTICAL除第二個函數存儲在名爲animirajLogo的變量裏面並且該變量在中調用setInteval函數。

First function logoSlide（）;在文檔加載時執行並滑動ONCE所有幻燈片然後setInteval函數進入並繼續循環。

這是我的問題：是否有可能以某種方式縮短內部animirajLogo我的代碼和呼叫功能變量（執行一次）而不是使用兩個函數至極幾乎是相同的（僅在第二個功能不同的是，它是存儲在裏面的變量，該變量是在setInteval函數內）。我嘗試命名第二個函數並調用它，但它似乎不工作。謝謝您的回答！！

var animirajLogo; 
    function logoSlide() 
    { 
    $('.logo').delay(2000).animate({opacity:1},2000); 
    $('.wordslider').delay(6000).animate({width:'451px'},2000,function(){ 
    $('.boost').delay(1000).stop().animate({marginLeft:'+=436'},2000); 
    $('.logo').delay(9000).animate({opacity:0},2000,function(){ 
    $('.logo').addClass('logo2'); 
    $('.logo2').removeClass('logo'); 
    $('.wordslider').css({width:'0'}) 
    $('.boost').css({marginLeft:'-=436'}) 
    $('.logo2').delay(1000).animate({opacity:1},2000); 
    $('.wordslider').delay(4000).animate({width:'451px'},2000,function(){ 
    $('.boostlevel').delay(1000).animate({marginLeft:'+=390'},2000,function(){ 
    $('.logo2').delay(5000).animate({opacity:0},2000,function(){ 
    $('.logo2').addClass('logo3'); 
    $('.logo3').removeClass('logo2'); 
    $('.wordslider').css({width:'0'}) 
    $('.boostlevel').css({marginLeft:'-=390'}) 
    $('.logo3').delay(2000).animate({opacity:1},2000); 

    if ($('.logo3').is($('.logo3'))){ 
    $('.logo3').delay(10000).animate({opacity:0},2000,function(){ 
    $('.logo3').addClass('logo'); 
    $('.logo3').removeClass('logo3'); 

    }); 

    } 
    }); 

    }); 

    }); 
    }); 
    }); 

    } 

    animirajLogo=function() 
    { 
    $('.logo').delay(2000).animate({opacity:1},2000); 
    $('.wordslider').delay(6000).animate({width:'451px'},2000,function(){ 
    $('.boost').delay(1000).stop().animate({marginLeft:'+=436'},2000); 
    $('.logo').delay(9000).animate({opacity:0},2000,function(){ 
    $('.logo').addClass('logo2'); 
    $('.logo2').removeClass('logo'); 
    $('.wordslider').css({width:'0'}) 
    $('.boost').css({marginLeft:'-=436'}) 
    $('.logo2').delay(2000).animate({opacity:1},2000); 
    $('.wordslider').delay(4000).animate({width:'451px'},2000,function(){ 
    $('.boostlevel').delay(1000).animate({marginLeft:'+=390'},2000,function(){ 
    $('.logo2').delay(5000).animate({opacity:0},2000,function(){ 
    $('.logo2').addClass('logo3'); 
    $('.logo3').removeClass('logo2'); 
    $('.wordslider').css({width:'0'}) 
    $('.boostlevel').css({marginLeft:'-=390'}) 
    $('.logo3').delay(2000).animate({opacity:1},2000); 

    if ($('.logo3').is($('.logo3'))){ 
    $('.logo3').delay(10000).animate({opacity:0},2000,function(){ 
    $('.logo3').addClass('logo'); 
    $('.logo3').removeClass('logo3'); 

    }); 

    } 




    }); 

    }); 

    }); 
    }); 
    }); 

    } 

    $(document).ready(function(){ 
    logoSlide(); 
    setInterval(animirajLogo,51500) 
    }); 

Answer 1

在你的情況下，有聲明function沒有區別：

function foo() { alert('foo'); } 
foo(); 

，並聲明一個變量指向的函數：

var bar = function() { alert('bar'); } 
bar(); 

那麼，你就應該能夠請致電animirajLogo如下：

$(document).ready(function(){ 
    animirajLogo(); 
    setInterval(animirajLogo, 51500); 
});