setInterval index index mystery

Question

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

Так что я начинаю как 0, отлично! Каждый цикл через i получает i +1 (это все кажется замечательным) ... но когда я нажимаю #sliderNext, вы увидите, что я не добавляю к значению i, но он все еще увеличивает значение i (почему ???) Это означает, что Я нажимаю prev, я должен уменьшить значение на 2 вместо i-- (опять же, почему?) ... Я толстый и не вижу ничего очевидного?

Возможно, лучший способ добавить предыдущий + следующий (тот, который не останавливает setinterval полностью)

$.when(loadImages()).done(function(a1){ 

    var i = 0; 
    var numberOfImgs = imgArr.length; 

    function sliderRotate(passi){   
      $('#autoSlider').html(imgArr[i]); //show with current i index 
      i++; //it should increment AFTER image has shown 

      if (i >= numberOfImgs || i < 0){ i = 0; } 
    } 


sliderRotate(); 
intervalID = setInterval(sliderRotate, 3000); 

//prev + next clicks 
      $('#sliderNext').on('click' , function(){    

        clearTimeout(intervalID); 
        //x = i + 1;  
        sliderRotate();   
      }); 
      $('#sliderPrev').on('click' , function(){ 

        clearTimeout(intervalID); 
        if (i === 0){ i = imgArr.length -2; } //this only kind of works if I click twice on the first image 
        else{i = i - 2; } 
        sliderRotate();     
      }); 


});// end of when 

Вот фрагмент пример:

$(document).ready(function(){ 
 

 
var imgArr = [ 
 
    '<img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg">', 
 
    '<img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg">', 
 
    '<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia20645_main.jpg?itok=dLn7SngD">', 
 
    '<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/pia18368-1041.jpg?itok=Fkc2j_kw">', 
 
    '<img src="http://www.irishtimes.com/polopoly_fs/1.2527148.1454955520!/image/image.jpg_gen/derivatives/landscape_685/image.jpg">', 
 
    '<img src="http://www.gettyimages.in/gi-resources/images/Homepage/Hero/US/Feb2016/video-481880130.jpg">' 
 
]; 
 

 
var i = 0; 
 
    var numberOfImgs = imgArr.length; 
 

 
    function sliderRotate(passi){ \t  
 
    \t \t $('#autoSlider').html(imgArr[i]); 
 
    \t \t i++; //should increment here, not before???  \t 
 
     
 
    \t \t if (i >= numberOfImgs || i < 0){ i = 0; } 
 
    } 
 

 
    
 
sliderRotate(); 
 
intervalID = setInterval(sliderRotate, 3000); 
 

 
//prev + next clicks 
 
    \t \t $('#sliderNext').on('click' , function(){  \t \t \t 
 
    \t \t \t \t \t \t \t \t 
 
    \t \t \t \t clearTimeout(intervalID); 
 
    \t \t \t \t //x = i + 1; \t 
 
    \t \t \t \t sliderRotate(); \t \t 
 
    \t \t }); \t 
 
    \t \t $('#sliderPrev').on('click' , function(){ 
 
    \t \t \t \t 
 
    \t \t \t \t clearTimeout(intervalID); 
 
    \t \t \t \t if (i === 0){ i = imgArr.length -2; } //kindah works, but still buggy 
 
    \t \t \t \t else{i = i - 2; } 
 
    \t \t \t \t sliderRotate(); \t \t \t \t \t 
 
    \t \t }); \t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sliderContainer"> 
 
<div id="sliderNext">Next</div><br><br><br> 
 
<div id="sliderPrev">Prev</div> 
 
<div id="autoSlider"></div> 
 
</div>

Answer 1

Initial Значение i: 0. sliderRotate функция отображает первое изображение (по индексу 0) и увеличивает его i на 1. При следующем выполнении этой функции будет показано второе изображение (с индексом 1), а i будет иметь значение 2.

Теперь вы хотите вернуться к предыдущему изображению (по индексу 0). Но значение i - 2. Вы должны показать изображение по индексу i - 2.

Answer 2

Вы звоните sliderRotate():

$('#sliderNext').on('click' , function(){    

       clearTimeout(intervalID); 
       //x = i + 1;  
       **sliderRotate();**   
     }); 

И что будет увеличивать его на 1:

function sliderRotate(passi){   
     $('#autoSlider').html(imgArr[i]); 
     i++; //should increment here, not before???  

     if (i >= numberOfImgs || i < 0){ i = 0; } 
} 

То же самое для "пред", вы добавляете 1, когда вы звоните sliderRotate(), поэтому вам необходимо вычесть 2.

Вот рабочий пример с кодом: https://jsfiddle.net/owbL084z/2/