Question

情境：

我有一个我想自动调用的函数。但是在鼠标单击时我希望此功能停止。如何在JS中控制匿名函数？

实施例

HTML

<div id="seventyfive" style="position:absolute; font-size:10px; font-weight:bold">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/200px-Heart_coraz%C3%B3n.svg.png" style="width:50px"/>
</div>

JS

(function pulse(back) {
    $('#seventyfive').animate(
        {
            'font-size': (back) ? '10px' : '15px',
            opacity: (back) ? 0.3 : 1
        }, 600, function(){pulse(!back)});
    $('#seventyfive img').animate(
        {
            'width': (back) ? '50px' : '40px'
        }, 600);
})(false);

var on = true;
$("#seventyfive").click(function(){

    on = !on;

    if(on){

       // Start/Stop Pulse function
    }

});

JSFiddle示例JSFiddle Example

Answer 1

您可以通过使用CSS来加速硬件加速，从而大大提高性能。

＆＃13;

$("#seventyfive").click(function() {
  $(this).toggleClass("pulsing");
});

＆＃13;

.heart.pulsing img {
  animation: pulse 600ms ease infinite alternate;
}

@keyframes pulse {
  0% {
    transform: none;
  }
  100% {
    transform: scale(1.2);
    opacity: 0.3;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<div id="seventyfive" class="heart" style="position:absolute; font-size:10px; font-weight:bold">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/200px-Heart_coraz%C3%B3n.svg.png" style="width:50px" />
</div>

＆＃13;

有了这个，只需将pulsing课程应用到#seventyfive，心就会动起来。请注意，这会动画opacity和transform，而不是font-size，以避免触发浏览器执行重新布局。

JS如何控制匿名函数

1 个答案: