javascript - 当fadeToggle()永久淡出该元素时？

这是我的代码：

  function blink(el) {
    el.fadeToggle("500", blink);
  }

$("body").on('click', '.l_acceptedanswer', function(e) {
    var $el = $(this).find('.fa-check');
		blink($el);

});

.fa-check {
    color: #aaa;
    cursor: pointer;
}

.fa-check.checked {
    color: #44b449;
}

<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>answer1</p>
<a class='l_acceptedanswer'>
    <i class="fa fa-check" aria-hidden="true"></i>
</a>
<hr>
<p>answer2</p>
<a class='l_acceptedanswer'>
    <i class="fa fa-check checked" aria-hidden="true"></i>
</a>
<hr>
<p>answer3</p>
<a class='l_acceptedanswer'>
    <i class="fa fa-check" aria-hidden="true"></i>
</a>

如您所见，当我单击其中一个选中图标时，它将被隐藏。为什么？我希望它永远闪烁。怎么了？

最佳答案

当您提供blink作为fadeToggle()的回调时，它将在不使用您的元素作为参数的情况下调用它。这就是为什么出现错误Uncaught TypeError: Cannot read property 'fadeToggle' of undefined的原因-因为el是undefined。

解决该问题的一种方法如下。

编辑：在评论中，@ stack提到无法设置较短的延迟以更快地闪烁。指定毫秒数时，.fadeToggle()的第一个参数必须是数字，而不是字符串。因此，将"500"（字符串）更改为100（数字）。

function blink(el) {
  el.fadeToggle(100, function() {
    blink(el)
  });
}

$("body").on('click', '.l_acceptedanswer', function(e) {
  var $el = $(this).find('.fa-check');
  blink($el);
});

<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>answer1</p>
<a class='l_acceptedanswer'>
  <i class="fa fa-check" aria-hidden="true"></i>
</a>
<hr>
<p>answer2</p>
<a class='l_acceptedanswer'>
  <i class="fa fa-check checked" aria-hidden="true"></i>
</a>
<hr>
<p>answer3</p>
<a class='l_acceptedanswer'>
  <i class="fa fa-check" aria-hidden="true"></i>
</a>

注意：您应该已经在控制台中看到此错误-即使您没有查看浏览器的控制台，Stack Overflow代码片段控制台也可以很清楚地向您显示该错误。