使用参数重复调用 jquery 函数导致超出最大调用堆栈

Question

我试图让图标闪烁，我得到了以下 html：<button type="button" id="user-card-icon-headphones" class="user-card__button" disabled="" >   <i class="fa fa-headphones"></i></button><button type="button" id="user-card-icon-phone" class="user-card__button" disabled="">   <i class="fa fa-phone"></i></button>我正在这样做：function blinkIcon(iconId){   $('#' + iconId).find('i').delay(100).fadeTo(100,0.5).delay(100).fadeTo(100,1, blinkIcon(iconId));}blinkIcon('user-card-icon-headphones');但我只得到一次图标闪烁，并且在显示超出最大调用堆栈的错误之后。欢迎任何如何解决它的想法。谢谢你。

Answer 1

您正在blinkIcon立即调用，您需要将其作为函数传递给动画。

function blinkIcon(iconId){

   $('#' + iconId).find('i')

   .delay(100).fadeTo(100,0.5)

   .delay(100).fadeTo(100,1, function() { blinkIcon(iconId); });

}

blinkIcon('user-card-icon-headphones');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="user-card-icon-headphones" class="user-card__button" disabled="" >

   <i class="fa fa-headphones">xxx</i>

</button>

<button type="button" id="user-card-icon-phone" class="user-card__button" disabled="">

   <i class="fa fa-phone">yyy</i>

</button>

请注意，没有办法停止闪烁，您最好使用setInterval.