Повторяющаяся функция после изменения переменной в jQuery

Question

Я хочу, чтобы каждый раз, когда нажимали кнопку, каждый раз появлялись текстовые элементы один за другим. Вот код, я использовал, чтобы осуществить это ...

$('.btn').click(function(){ 
    $('.text').css({ 'opacity': '0' }); 

    function loadText(){ 
     var textNo = 1; 

     function nextText(){  
      $('.text'+textNo).animate({ 'opacity': '1' }, 400); 
      textNo += 1; 
     } 

     if (textNo <= 4){ 
      nextText(); 
     }; 
    } 

    setTimeout(loadText, 300); 
}); 

Я хочу, чтобы функция nextText() повторить 4 раза, хотя называть его снова, кажется, не имеют никакого эффекта. Я пропустил что-то очевидное здесь?

Вы можете увидеть это здесь в течение ограниченного времени: http://thetally.efinancialnews.com/tallyassets/ceo-survey/index.html

я теперь понимаю проблему, частично. Когда nextText вызывается, внутри этой функции нет ничего, чтобы запустить ее снова. Можете ли вы поместить вызов функции внутри функции?

Answer 1

Вам нужно использовать метод setInterval вместо метода setTimeout. Так заменить это:

setTimeout(loadText, 300); 

с этим:

setInterval(loadText, 300); 

Answer 2

Использование setInterval вызвать функцию несколько раз и переместите textNo так, что его значение увеличивается на единицу доступной в последующем вызове.

Всегда отменить функцию от запуска несколько раз, используя clearInterval раз условие выполняется

Использование

$('.btn').click(function() { 
    $('.text').css({ 
     'opacity': '0' 
    }); 

    //Move the variable outside 
    var textNo = 1; 

    function loadText() { 
     function nextText() { 
      $('.text' + textNo).animate({ 
       'opacity': '1' 
      }, 400); 
      textNo++; 
     } 
     if (textNo <= 4) { 
      nextText(); 
     } else { 
      //Cancels repeated action which was set up using setInterval 
      clearInterval(interval); 
     } 
    } 

    //Calls a function or executes a code snippet repeatedly, with a fixed time delay between each call to that function. 
    var interval = setInterval(loadText, 300); 
}); 

Answer 3

LoadText не доступен для SetTimeout, причем содержащиеся в «нажмите кнопку» функции. Вы можете просто переместить функцию loadText за пределы определения щелчка, как показано ниже.

$('.btn').click(function() { 
    $('.text').css({ 
     'opacity': '0' 
    }); 
    setTimeout(loadText, 300); 
}); 

function loadText() { 
    var textNo = 1; 

    function nextText() { 
     $('.text' + textNo).animate({ 
      'opacity': '1' 
     }, 400); 
     textNo += 1; 
    } 
    if (textNo <= 4) { 
     nextText(); 
    }; 
} 

Answer 4

Другой вариант с setTimeout, но slighly модифицированный код, без nextText() который был (вид) заменены анимации обратного вызова. Как все уже сказали, переместите var textNo = 1; за пределы loadText().

$('.btn').click(function() { 
 
    $('.text').css({ opacity: 0}); 
 
    var textNo = 1, timer; 
 

 
    function loadText() { 
 
     $('.text' + textNo).animate({ 
 
      opacity: 1 
 
     }, 400, function() { 
 
      if (textNo++ <= 4) { 
 
       loadText(); 
 
      } else { 
 
       clearTimeout(timer); 
 
      } 
 
     }); 
 
    } 
 

 
    timer = setTimeout(loadText, 300); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="text text1">t1</div> 
 
<div class="text text2">t2</div> 
 
<div class="text text3">t3</div> 
 
<div class="text text4">t4</div> 
 
<button class="btn">Button</button>