Jquery -制作闪烁的光，while-setTimeout问题

Question

我想做的是做一些像霓虹灯风格的闪烁光。此函数尚未完成:

function callFlicker($target, size, color1, color2, color3){
        var fastInterval    = getRandomInt(1, 5) * 30;
        var longInterval    = getRandomInt(1, 20) * 100;
        var afIntervals     = getRandomInt(3, 6);
        var alIntervals     = getRandomInt(1, 3);
        var getTColor       = $target.css('color'); 
        var TargetLight = $target.css({
            '-webkit-box-shadow'    : '0 0px '+size+'px rga('+color1+','+color2+','+color3+')',
            'box-shadow'            : '0 0px '+size+'px rgb('+color1+','+color2+','+color3+')',
            'color'                 : getTColor,
            'opacity'               : 1
        });
        var TargetDark = $target.css({
            '-webkit-box-shadow'    : '0 0px '+size+'px rga('+color1+','+color2+','+color3+')',
            'box-shadow'            : '0 0px '+size+'px rgb('+color1+','+color2+','+color3+')',
            'opacity'               : 0.2
        });
        while(afIntervals > 0) {
            afIntervals -= 1;           
            setTimeout(function(){
                $target.css({
                    '-webkit-box-shadow'    : '0 0px '+size+'px rga('+color1+','+color2+','+color3+')',
                    'box-shadow'            : '0 0px '+size+'px rgb('+color1+','+color2+','+color3+')',
                    'color'                 : getTColor,
                    'opacity'               : 1
                });
            }, fastInterval);           
            setTimeout(function(){
                $target.css({
                    '-webkit-box-shadow'    : '0 0px '+size+'px rga('+color1+','+color2+','+color3+')',
                    'box-shadow'            : '0 0px '+size+'px rgb('+color1+','+color2+','+color3+')',
                    'opacity'               : 0.2
                });
            }, fastInterval*2);
        }   
};

这背后的逻辑是什么，$target是闪烁将被放置的对象，size是盒影的大小，color(1,2,3)是盒影的颜色。fastInterval是必要的，以确定afIntervals之间的间隔会发生多快，如果你记得霓虹灯是如何闪烁的，当你打开它们时，它只是几个快速闪烁(afIntervals在这里)和一个或两个长在最后(alIntervals在这里)，这就是我试图实现与所有这些。

所以，更接近这个问题，我不知道我应该如何准确地迭代所有间隔，我已经尝试过while, setTimeout只运行一次，但我希望它们一直发生，while afIntervals > 0。这是怎么做到的呢?

JSFiddle: http://jsfiddle.net/m33ru/(注意:您可能需要点击几次"run"来查看代码在第一次迭代中实际工作)

注:可能不是最好的主意与var TargetLight, TargetDark，但我不知道现在我怎么能在var Json数据存储以后加载它。

Answer 1

你的Javascript代码不工作。这是正确的代码。你可以看到它在这里工作。http://jsfiddle.net/m33ru/4/

你可以使用setInterval()作为建议在另一个答案，但你的动画无限期地继续。我的解决方案是有效的，如果你只想动画有限次。

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
function callFlicker($target, size, color1, color2, color3){
    var fastInterval    = getRandomInt(1, 5) * 30;
    var longInterval    = getRandomInt(1, 20) * 100;
    var afIntervals     = getRandomInt(3, 6);
    var alIntervals     = getRandomInt(1, 3);
    var getTColor       = $target.css('color'); 
    var TargetLight = $target.css({
        '-webkit-box-shadow'    : '0 0px '+size+'px rga('+color1+','+color2+','+color3+')',
        'box-shadow'            : '0 0px '+size+'px rgb('+color1+','+color2+','+color3+')',
        'color'                 : getTColor,
        'opacity'               : 1
    });
    var TargetDark = $target.css({
        '-webkit-box-shadow'    : '0 0px '+size+'px rga('+color1+','+color2+','+color3+')',
        'box-shadow'            : '0 0px '+size+'px rgb('+color1+','+color2+','+color3+')',
        'opacity'               : 0.2
    });
    console.log(afIntervals+' '+alIntervals);       
    var lightup = function(){
            $target.css({
                '-webkit-box-shadow'    : '0 0px '+size+'px rga('+color1+','+color2+','+color3+')',
                'box-shadow'            : '0 0px '+size+'px rgb('+color1+','+color2+','+color3+')',
                'color'                 : getTColor,
                'opacity'               : 1
            });
            setTimeout(lightdown, fastInterval);
    };
    var lightdown = function(){
            $target.css({
                '-webkit-box-shadow'    : '0 0px '+size+'px rga('+color1+','+color2+','+color3+')',
                'box-shadow'            : '0 0px '+size+'px rgb('+color1+','+color2+','+color3+')',
                'opacity'               : 0.2
            });
            afIntervals--;
            if (afIntervals > 0) setTimeout(lightup, fastInterval);
    };
    setTimeout(lightup, fastInterval);
};
$(document).ready(function(){   
    callFlicker($('.flicker'), 25, 68, 192, 255);       
});

Answer 2

你应该使用setInterval()方法而不是setTimeout()

    while(afIntervals > 0) {
        afIntervals -= 1;           
        setInterval(function(){
            $target.css({
                '-webkit-box-shadow'    : '0 0px '+size+'px rga('+color1+','+color2+','+color3+')',
                'box-shadow'            : '0 0px '+size+'px rgb('+color1+','+color2+','+color3+')',
                'color'                 : getTColor,
                'opacity'               : 1
            });
        }, fastInterval);           
        setInterval(function(){
            $target.css({
                '-webkit-box-shadow'    : '0 0px '+size+'px rga('+color1+','+color2+','+color3+')',
                'box-shadow'            : '0 0px '+size+'px rgb('+color1+','+color2+','+color3+')',
                'opacity'               : 0.2
            });
        }, fastInterval*2);
        console.log(afIntervals);
    }

http://jsfiddle.net/m33ru/3/