Javascript/JQuery: просмотрите массив и поместите элементы внутри div

Question

, поэтому я создал функцию, которая меняет текст внутри определенного div по элементам из массива, эта функция просматривает массив строк, а затем, когда он достигает своего конца она начинается с начала

здесь код JQuery:

$(document).ready(function() { 

//This is the array with multiple elements 
var array1=["word1" , "word2" , "word3" , "word4" , "word5" , "word6" ]; 
var i=0; 

//This is my function 
function f1() 
{ 
    if(i<6) 
    { 
     $('#change').fadeOut('slow', function() { 
     $(this).text(array1[i]).fadeIn('slow'); 
     }); 
     i++; 
    } 
    else 
    { 
     i=0; 
     $('#change').fadeOut('slow', function() { 
     $(this).text(array1[i]).fadeIn('slow'); 
     }); 
     i++; 
    } 

} 

$("#btn1").click(f1); 
}); 

Это элемент, который следует изменить на каждом клике

<h3 id="change">this is a text</h3> 

И, конечно, есть кнопка

<button id="btn1">click</button> 

Теперь моя проблема заключается в том, что функция показывает элементы, как это:

word2 -> word3 -> word4 -> word5 -> word6 -> word6 - > word2

Он не показывает первый элемент, вместо этого он отображает шестой элемент дважды, можете ли вы сказать мне, что с ним не так?

Answer 1

Функция fadeOut является асинхронной, поэтому ваш i++ происходит до того, как функция действительно будет завершена. Что вам нужно сделать, это переместить i++ после завершения анимации.

Смотрите здесь:

if(i<6) 
{ 
    $('#change').fadeOut('slow', function() { 
     $(this).text(array1[i]).fadeIn('slow'); 
     i++; // <-- move here 
    }); 
} 
else 
{ 
    i=0; 
    $('#change').fadeOut('slow', function() { 
     $(this).text(array1[i]).fadeIn('slow'); 
     i++; // <-- move here 
    }); 
} 

Answer 2

Другим решением может быть основано на data attributes. Завершение управления всей операции очень важно для того, чтобы избежать, чтобы начать новый цикл до окончания текущего один заканчивается:

//This is the array with multiple elements 
 
var array1=["word1" , "word2" , "word3" , "word4" , "word5" , "word6" ]; 
 

 
$(function() { 
 
    $("#btn1").on('click', function(e) { 
 
    // disable button till the operation is completed 
 
    $(this).prop('disabled', 'disabled'); 
 
    
 
    // use data-currentIndex to store the local variable i 
 
    var idx = $('#change').data('currentIndex'); 
 
    if (idx === undefined) { 
 
     idx = 0; 
 
    } 
 
    $('#change').fadeOut('slow', function() { 
 
     $(this).text(array1[idx]).fadeIn('slow'); 
 
     idx = (idx <= (array1.length - 2)) ? (idx + 1) : 0; 
 
     $('#change').data('currentIndex', idx); 
 
     
 
     // enable button because the operation is now completed 
 
     $("#btn1").removeProp('disabled'); 
 
    }); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 

 
<h3 id="change">this is a text</h3> 
 
<button id="btn1">click</button>