javascript - 为什么不能在自引用函数调用中将参数传递给 setTimeout？

Question

我认为有更好的方法可以做到这一点，也许有人可以指出我的错误。我通过向上和向下计数来脉冲 box-shadow blur css 属性，一旦启动，函数就会自行调用。

由于某种原因，我无法将参数传递给第一次传递的 setTimeout 调用。

关于如何更干净地写这个的任何想法？它可以工作，但将它推广到其他 css 属性的动画效果会很好。

var pulseBoxShadowBlurCounter = 0;
var pulseBoxShadowBlurDirection;

$(document).ready(function() { // dom binds

pulseBoxShadowBlur($('#getData-btn'),14,'#fff',100); // start the process

});

function pulseBoxShadowBlur(pulseElement,max,color,delayTime){
var cssInput = '0px 0px '+pulseBoxShadowBlurCounter+'px '+color;
$(pulseElement).css('box-shadow', cssInput);

    if(pulseBoxShadowBlurCounter == max){
        pulseBoxShadowBlurDirection = 1; // backwards
    }

    if(pulseBoxShadowBlurCounter == -5){ // negative num for pause at 0 time
        pulseBoxShadowBlurDirection = 0; // forward
    }

    if(pulseBoxShadowBlurDirection == 0){ 
        pulseBoxShadowBlurCounter++;
    }else{
        pulseBoxShadowBlurCounter--;
    }

setTimeout( "pulseBoxShadowBlur($('#getData-btn'),14,'#fff',100);",delayTime ); // loop
}

Answer 1

你可以：

setTimeout(function() { pulseBoxShadowBlur(element, max, color, delayTime); }, delayTime);

通常，将某些 JavaScript 代码的字符串版本作为 setTimeout()or的第一个参数传递setInterval()是一个坏主意。而是传递一个函数。

Answer 2

您必须在闭包中执行此操作，如下所示：

setTimeout( function() {
   pulseBoxShadowBlur($('#getData-btn'),14,'#fff',100);
}),delayTime ); 

Answer 3

由于您使用的是 jQuery，因此您可以像这样delay使用queue：

$('#getData-btn').delay(delayTime).queue(function(next) {
  pulseBoxShadowBlur($(this),14,'#fff',100);
  next(); // resume queue
});