Функция остановки цикла при нажатии кнопки

Question

У меня есть серия массивов, которые я показываю один за другим, используя цикл jquery.

Проверить JSFiddle Demo.

Теперь я хочу остановить его, когда пользователь нажмет кнопку «Остановить это сейчас».

HTML:

<h1>Lorem ipsumd dolor sit amet.</h1> 
<div id="div1">Answer One</div> 
<div class="stop"> 
    <button>Stop it Now.</button> 
</div> 

CSS:

body{text-align:center;} 
h1{padding:30px; margin:0 0 0 30px;} 
#div1{padding:20px;margin-top:0; text-align:center;} 

JQuery

$(document).ready(function() { 

var items = ["Answer Two", "Answer Three", "Answer Four", "Answer Five", "Answer Six", "Answer One"], 
    $text = $('#div1'), 
    delay = .2; //seconds 

function loop (delay) { 
    $.each(items, function (i, elm){ 
     $text.delay(delay*1E3).hide(); 
     $text.queue(function(){ 
      $text.html(items[i]); 
      $text.dequeue(); 
     }); 
     $text.show(); 
     $text.queue(function(){ 
      if (i == items.length -1) { 
       loop(delay); 
      } 
      $text.dequeue(); 
     }); 
    }); 
} 

loop(delay); 
}); 

Как я могу добиться этого?

Answer 1

Одним из решений является использование .stop(true, false). Выполнение этой операции очистит очередь и не выполнит ожидающие функции.

$("button").on("click", function() { 
    $text.stop(true, false); 
}) 

Updated Fiddle

Answer 2

Используйте флаг. Попробуйте следующее:

var flag = false; 

$(".stop button").click(function(){ 
    flag=true; 
}); 
function loop (delay) { 
    $.each(items, function (i, elm){ 
     $text.delay(delay*1E3).hide(); 
     $text.queue(function(){ 
      $text.html(items[i]); 
      $text.dequeue(); 
     }); 
     $text.show(); 
     $text.queue(function(){ 
      if (i == items.length -1) { 
       loop(delay); 
      } 
      $text.dequeue(); 
     }); 
     if(flag) break; 
    }); 
} 

Answer 3

Если изменить логику вы используете для реализации таймера он делает код намного проще, а также означает, что вы можете просто вызвать clearInterval по таймеру, чтобы остановить изменение текста. Попробуйте это:

$(document).ready(function() { 
    var items = ["Answer Two", "Answer Three", "Answer Four", "Answer Five", "Answer Six", "Answer One"], 
     $text = $('#div1'), 
     delay = 200, // miliseconds 
     itemIndex = 0; 

    var interval = setInterval(function() { 
     $text.text(items[itemIndex % items.length]); 
     itemIndex++; 
    }, delay); 

    $('button').click(function() { 
     clearInterval(interval); 
    }) 
}); 

Example fiddle

Answer 4

Я добавил параметр, называемый "stopLoop", который инициализируется как ложь. После нажатия кнопки этот параметр становится истинным и останавливает цикл. здесь:. http://jsfiddle.net/fcLso5c9/9/

$(document).ready(function() { 
var stopLoop = false; 

$ ("кнопка") нажмите (функция() {stopLoop = истина;}); var items = ["Answer Two", "Answer Three", "Answer Four", "Answer Five", "Answer Six", "Answer One"], $ text = $ ('# div1'), Задержка = .2; // с.

function loop (delay) { 
    if (stopLoop) return; 
    $.each(items, function (i, elm){ 
     $text.delay(delay*1E3).hide(); 
     $text.queue(function(){ 
      $text.html(items[i]); 
      $text.dequeue(); 
     }); 
     $text.show(); 
     $text.queue(function(){ 
      if (i == items.length -1) { 
       loop(delay); 
      } 
      $text.dequeue(); 
     }); 
    }); 
} 

loop(delay); 

});

Вы можете использовать почти тот же код, чтобы иметь старт/стоп функциональность