Jquery - 使闪烁光，同时setTimeout问题

Question

我想做的是制作类似 NEON 风格的闪烁光的东西。该功能尚未完成:

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是box-shadow的大小，color(1, 2,3) 是盒子阴影的颜色。fastInterval 对于确定 afIntervals 之间的间隔发生的速度是必要的，如果您还记得 NEON 在打开时如何闪烁，它只是一些快速闪烁( afIntervals 此处)，最后一两个长(alIntervals 此处)，这就是我试图通过所有这些实现的目标。

因此，越来越接近问题，我不知道应该如何迭代所有间隔，我尝试过 while，并且 setTimeout 仅运行一次，但我希望它们始终发生，while afIntervals > 0。这是怎么做到的？

JSFiddle:http://jsfiddle.net/m33ru/ (注意:您可能需要点击“运行”几次才能看到代码在第一次迭代中实际工作)

附注使用 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);       
});