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

Question

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

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 needs to be set to a variable in order to properly clear. Here is a quick demo我发解释了

var myInterval;

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

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

附带说明一下，如果您只想调用一次 interval/loop，我能问一下您为什么要创建它吗？

试试这个：

if (flag) {
    clearInterval(interval);
}

编辑：

所以我最初认为您可以使用 animate() 方法通过其回调来完成此操作，但后来我意识到您尝试更改的一半样式不接受没有插件的动画。我想出的是 css style/animation 选项的 4 个阶段。每个阶段都嵌套在 animate() 方法的回调中。它将通过 html() 方法更改文本字符串，并通过 css() 或 animate() 方法调整您所做的任何样式更改。时间存储在动画对象中，可以轻松调整。显然，您仍然需要做一些工作来稍微修改它以满足您的确切需求，但希望这可以帮助您入门！

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

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

Viewport Checker - jQuery run loop once

jquery

viewport

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

Viewport Checker - jQuery run loop once

jquery

viewport

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