视口检查器-jQuery运行一次循环 [英] 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).

有什么想法吗?

推荐答案

setInterval 需要设置为变量以正确清除.这是我快速解释的演示.

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?

尝试一下:

if (flag) {
    clearInterval(interval);
}

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

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!

演示

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运行一次循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！