查看端口检查器- jQuery运行循环一次

Question

我正在使用viewport检查器，我希望动画只运行一次，到目前为止，我有以下内容：-

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);
        }
    }
});

但是由于某种原因，它一次又一次地循环(而且由于一些未知的原因，当它第二次循环时，它开始以不同的顺序运行)。

有什么想法吗？

Answer 1

为了正确清除，需要将setInterval设置为变量。这是我制作的一个快速演示来解释。

var myInterval;

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

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

顺便提一下，如果您只想调用一次，那么为什么要创建一个间隔/循环呢？

试试这个：

if (flag) {
    clearInterval(interval);
}

编辑：

所以我想，最初您可以使用animate()方法通过回调来完成这一任务，但后来我意识到，您要更改的样式中有一半没有插件就不能接受动画。我想出了4个阶段的css风格/动画选项。每个阶段都嵌套在animate()方法的回调中。它将通过html()方法更改文本字符串，并通过css()或animate()方法调整任何样式更改。时间存储在anim对象中，可以很容易地进行调整。显然，您仍然需要做一些工作来修改这一点，以满足您的确切需求，但希望这将使您开始！

演示

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);