JS如何控制匿名功能

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示例

Answer 1

通過使用CSS，您可以受益於硬件加速，從而大大提高了性能。

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

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

 <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> 

這樣，只需將pulsing類應用於#seventyfive ，心臟就會脈動。 請注意，這會設置opacity和transform動畫效果，而不是font-size動畫效果，以避免觸發瀏覽器執行重新布局。