jQuery 事件停止循环

Question

我刚开始 jQuery，请耐心等待。如何在尝试 window 滚动或鼠标输入时停止此闪烁功能？提前致谢！

<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

我会使用 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 2

我建议使用布尔变量而不使用递归（会更 CPU 友好）：

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

Answer 3

如果您正在学习 jQuery 并假设 javascript 也...

，我很可能会这样做

HTML

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

脚本

$(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;

live 版本 在 JsBin 中：http://jsbin.com/gajafokale/1/edit?html,js,output

jQuery 事件停止循环

jQuery stop loop on event

jquery

events

function