Viewport Checker - jQuery run loop once

问题:

I am using viewport checker and I want the animation to only run once, so far I have the following:-

jQuery('#style-wrapper').viewportChecker({
    callbackFunction: function(elem) {
        var flag = true;
        interval = setInterval(function(){
            jQuery('.page-template-template-homepage .work-description').html('Different');
            jQuery('.page-template-template-homepage .work-description').css( "font-weight", "700" );
            jQuery('.page-template-template-homepage #style-wrapper').css( "background", "#7ec4bf");
            jQuery('.page-template-template-homepage #style-wrapper').css( "color", "#14143a");
        },1000);
        interval = setInterval(function(){
            jQuery('.page-template-template-homepage .work-description').html('Distinct');
            jQuery('.page-template-template-homepage .work-description').css( "font-weight", "900" );
            jQuery('.page-template-template-homepage #style-wrapper').css( "background", "#14143a");
            jQuery('.page-template-template-homepage #style-wrapper').css( "color", "#FFFFFF");
        },2000);
        interval = setInterval(function(){
            jQuery('.page-template-template-homepage .work-description').html('People');
            jQuery('.page-template-template-homepage #style-wrapper').css( "background", "#b0a893");
        },3000);
        interval = setInterval(function(){
            jQuery('.page-template-template-homepage .work-description').html('Want');
            jQuery('.page-template-template-homepage .work-description').css( "font-weight", "900" );
            jQuery('.page-template-template-homepage .work-description').css( "font-size", "54px" );
            jQuery('.page-template-template-homepage #style-wrapper').css( "background", "#39779f");
            jQuery('.page-template-template-homepage #style-wrapper').css( "color", "#14143a");
        },4000);
        if (flag) {
            interval = setInterval(function(){
                flag = false;
            },5000);
        }
    }
});

but for some reason it keeps looping over and over again (and for some unknown reason, when it loops the second time it starts going in a different sequence).

Any ideas?

回答1:

setInterval needs to be set to a variable in order to properly clear. Here is a quick demo I made to explain.

var myInterval;

$('button[name="start"]').click(function(){
    myInterval = setInterval(function(){
        $('body div').prepend('Oh Hai! ');
    });
});

$('button[name="end"]').click(function(){
    clearInterval(myInterval);
});

As a side note, can I ask why you are creating an interval/loop if you only want it to be called once?

Try this:

if (flag) {
    clearInterval(interval);
}

Edit:

So I was thinking initially you could use the animate() method to accomplish this through its callbacks, but then I realized half of the styles you are trying to change don't accept animation without plugins. What I came up with gives you 4 stages of css style/animation options. Each stage is nested within the animate() method's callback. It will change the text string through the html() method, and adjust any style changes you have through the css() or animate() methods. The timings are stored within the anim object and can easily be adjusted. Obviously you will still need to do some work to modify this a bit to fit your exact needs, but hopefully this gets you started!

DEMO

var anim = {
    config: {
        slideDelay: 1000,   // Each step will take 1 second
        intervalDelay: 8000 // The entire loop will wait 8 seconds between iterations
    },
    run: function(selector){ 
        console.log('test');
        $('.selector').html('Different').css({ // Change any CSS Components (Stage1)
            'background'    : '#7ec4bf',
            'color'         : '#14143a',
            'font-size'     : '20px'
        }).animate({ // Option to animate components (Stage1)
            'font-weight'   : 400
        }, anim.config.slideDelay, function(){
            $('.selector').html('Distinct').css({ // Change any CSS Components (Stage2)
                'background'    : '#14143a',
                'color'         : '#FFFFFF',
                'font-size'     : '10px'
            }).animate({ // Option to animate components (Stage2)
                'font-weight'   : 600
            }, anim.config.slideDelay, function(){
                $('.selector').html('People').css({ // Change any CSS Components (Stage3)
                    'background'    : '#b0a893'
                }).animate({ // Option to animate components (Stage3)
                    'font-weight'   : 900
                }, anim.config.slideDelay, function(){
                    $('.selector').html('Want').css({ // Change any CSS Components (Stage4)
                        'background'    : '#39779f',
                        'color'         : '#14143a',
                        'font-size'     : '30px'
                    }).animate({ // Option to animate components (Stage4)
                        'font-weight'   : 100
                    }, anim.config.slideDelay);
                });
            });
        });
    }
};

var test = setInterval(anim.run, anim.config.intervalDelay);