How can I stop jquery from running a script once for each class member

StackOverflow https://stackoverflow.com/questions/22574187

Pergunta

I have the following code:

function fadeIn()
    {
    $(".home_photo").fadeTo(1000, 1.0 ).delay(5 * 1000);
    fadeOut();
    }

function doSwap()
    {
    console.log('Swap');
    ... There is some Ajax Code here that swaps the image in the divs ...
    fadeIn();
    }

function fadeOut()
    {
    $(".home_photo").fadeTo(1000, 0.01, doSwap );
    }

$(document).ready(function(){
    fadeOut();
});

Here is the HTML that goes with it:

<body>
<div id="photowrapper">
    <div class="home_photo" id="img1"></div>
    <div class="home_photo" id="img2"></div>
    <div class="home_photo" id="img3"></div>
    <div class="home_photo" id="img4"></div>
</div>
</body>

The jQuery script runs one time for each member of the class "home_photo". The problem is that the doSwap function runs 4 times for each swap cycle (fadeOut, doSwap, fadeIn). What do I need to do so that the script will only run once per swap instead of once for each class member?

Foi útil?

Solução

If you want doSwap() to run after the fadeTo() has completed you could use a jQuery deferred object to control the process:

$.when(function() {

    var deferred = $.Deferred();

    $(".home_photo").fadeTo(1000, 0.01, function(){
        deferred.resolve();
    });

    return deferred;

}).then(function(){

    doSwap();

});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top