Перезапуск setInterval в JavaScript

Question

var myImage = document.getElementById("mainImage"); 

var imageArray = ["_images/overlook.jpg","_images/winery_sign.jpg","_images/lunch.jpg", 
        "_images/bigSur.jpg","_images/flag_photo.jpg","_images/mission_look.jpg"]; 
var imageIndex = 0; 

function changeImage() { 
myImage.setAttribute("src",imageArray[imageIndex]); 
imageIndex++; 
if (imageIndex >= imageArray.length) { 
    imageIndex = 0; 
} 

}

Я пытался реорганизовать этот вопрос restarting a setInterval, но не мог получить это право. Любая помощь будет оценена! *** Добавленный контекст **** В основном у меня есть куча изображений, которые циклически проходят и останавливаются при нажатии на них. Я хотел бы, чтобы перезапустить велосипедный после нажатия снова ...

var intervalHandle = setInterval(changeImage,5000); 

//Basically I want a clearInterval on a click and then restart this changing image function it. 

myImage.onclick = function(){ 
    clearInterval(intervalHandle); 
    intervalHandle = setInterval(changeImage,5000); 
}; 

Answer 1

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

Хорошо, почему вы так не сказали? ;)

Итак, вы хотите начать интервал, если его не запустить, и остановить его, если он запущен.

var intervalHandle = setInterval(changeImage, 5000); // start the interval by default 
var running = true; // true if the interval is running, false if its not. 

myImage.onclick = function(){ 
    if (running) { 
    clearInterval(intervalHandle); // stop interval 
    running = false; // mark interval as stopped 
    } else { 
    intervalHandle = setInterval(changeImage, 5000); // start interval 
    running = true; // mark interval as started 
    changeImage(); // also change the image right now 
    } 
}; 

Answer 2

Я ожидаю, что проблема заключается в том, что setInterval не срабатывает сразу, и вы ожидаете его назвать changeImage как только вы нажмете myImage. Первый вызов changeImage будет через 5 секунд после щелчка по изображению. Вы могли бы сделать что-то вроде этого, чтобы позвонить changeImage сразу:

myImage.onclick = function() { 
    clearInterval(intervalHandle); 
    intervalHandle = setInterval(changeImage, 5000); 
    changeImage(); 
}; 

---

Другой выбор, чтобы покончить с промежутками полностью (как с this answer) - интервалы могут стоять в очереди, когда окно не сосредоточены в некоторых браузерах , чтобы вы могли иметь changeImage устанавливать свои собственные время ожидания:

var timeoutHandle = setTimeout(changeImage, 5000); 

function changeImage() { 
    // ... 
    timeoutHandle = setTimeout(changeImage, 5000); 
} 

myImage.onclick = function() { 
    clearTimeout(timeoutHandle); 
    changeImage(); 
}; 

Answer 3

единственная причина, почему я думаю, что это не будет работать, если вы определяете intervalHandle в «Дом готов» события или какой-либо другой функции, так попытайтесь поместить его в глобальный scope ra чем определять его.

EDIT: извините за первый ответ, что это на самом деле ложь обусловленно я не имел полную информацию о том, что вы хотите сделать это дома, это поможет вам

var intervalHandle = setInterval(changeImage,5000); 

myImage.onclick = function(){ 
    if (intervalHandle > -1) { 
    clearInterval(intervalHandle); 
    intervalHandle = -1; 
    } else { 
    intervalHandle = setInterval(changeImage,5000); 
    } 
};