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/（注意：您可能需要点击＆＃34;运行＆＃34;几次看到代码实际上适用于第一次迭代）

P.S。可能不是var TargetLight, TargetDark最好的想法，但我现在还不知道如何在var Json数据中存储以便以后加载它。

Answer 1

你应该使用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/

Answer 2

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

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

2 个答案: