jQuery stop loop on event

Question

Я только начинаю с jQuery, так что будьте терпеливы. Как остановить эту мигающую функцию при попытке прокрутки окна или мыши? Заранее спасибо!

http://jsfiddle.net/e2s8besv/1/

<p>blink me<p> 

<style>p {display:none;}</style> 

<script> 
    (function($) { 
     $.fn.blink= function(speed) { 
     $(this).fadeIn(speed).fadeOut(speed).blink(speed); 
    }; 
}(jQuery)); 

$("p").blink(1500); 
</script> 

Answer 1

Я бы скорее всего это сделал, если вы изучаете jQuery и предполагаете, javascript также ...

HTML

<p class="hide blink">blink me<p> 

Script

$(function() { 

    objInt = setInterval(function() { 
    $(".blink") 
     .fadeTo('fast', 0.2) 
     .fadeTo('fast', 0.5); 
    }, interval); 

    // stop on scroll (only works if there's actualy a scroll area) 
    $(window).scroll(function() { 
    clearInterval(objInt); 
    }); 

    // stop on mouseenter the paragraph tag 
    $(".blink").mouseenter(function() { 
    clearInterval(objInt); 
    }); 

}); 

var interval = 500, objInt; 

концертная версия в JsBin: http://jsbin.com/gajafokale/1/edit?html,js,output

Answer 2

Я хотел бы использовать boolean флаг, чтобы проверить, если действие происходит. Я также попытался бы разделить код на функции, чтобы вы могли повторно использовать их позже, если это необходимо. Попробуйте сделать что-то вроде этого:

HTML:

<p style="display:none">BLINK</p> 
<button>STOP</button> 

JS:

var blinking = false; 

function blink(speed) { 
    if (blinking) { 
     $("p").fadeIn(speed, function() { 
      $(this).fadeOut(speed); 
      blink(speed); 
     }); 
    } 
} 

function startBlink(speed) { 
    blinking = true; 
    blink(speed); 
} 

function stopBlink() { 
    blinking = false; 
} 

$(document).ready(function(){//makes sure your code runs once the DOM has completely loaded. 
    startBlink(1500); 
    $('button').click(stopBlink); 
}); 

Answer 3

Я хотел бы предложить что-то с логической переменной и без рекурсии (будет более удобным для процессора):

<p>blink me<p> 

<style>p {display:none;}</style> 
<button>Stop Blinking!</button> 
<script> 
    var isBlinkEnabled=true; 
    (function($) { 
     $.fn.blink= function(speed) { 
     while(isBlinkEnabled) 
     { 
      $(this).fadeIn(speed).fadeOut(speed); 
     } 
    }; 
}(jQuery)); 

$("p").blink(1500); 
$("button").click(function(){ 
    isBlinkingEnabled=false; 
}) 
</script>