Javascript setTimeout/setInterval

Question

Попытка сделать небольшое слайд-шоу для тестовой веб-страницы. Я смущен, почему этот код не работает (я не очень разбираюсь в javascript, я в основном занимаюсь Java, Javascript - это, скорее, умный, расстраивающий). Также я хотел бы добавить, что он начинает работать, и через несколько секунд он переключится на 3-е изображение, после чего перестанет переключаться.

var backgroundElement = document.getElementById("innerContent"); 
var minibarImage1 = document.getElementById("pic1"); 
var minibarImage2 = document.getElementById("pic2"); 
var minibarImage3 = document.getElementById("pic3"); 


minibarImage1.onmouseover = function(){ 
    backgroundElement.style.backgroundImage="url('images/frontpage/maintenance_01.jpg')"; 
}; 

minibarImage2.onmouseover = function() { 
    backgroundElement.style.backgroundImage ="url('images/frontpage/natural_steps_01.jpg')"; 
}; 

minibarImage3.onmouseover = function() { 
    backgroundElement.style.backgroundImage = "url('images/frontpage/twnshp_bdg_01b.jpg')"; 
}; 

function slideshow() { 
setTimeout(function(){backgroundElement.style.backgroundImage= "url('images/frontpage/maintenance_01.jpg')";}, 2000); 
setTimeout(function(){backgroundElement.style.backgroundImage = "url('images/frontpage/natural_steps_01.jpg')";}, 2000); 
setTimeout(function(){backgroundElement.style.backgroundImage = "url('images/frontpage/twnshp_bdg_01b.jpg')";}, 2000); 
} 


window.onload = setInterval(function(){slideshow();}, 8000); 

Answer 1

Как я уже указывал:

window.onload = setInterval(function(){slideshow();}, 8000); 

Должно быть так:

window.onload = function(){ 
    setInterval(function(){slideshow();}, 8000); 
} 

window.onload сохраняет функцию. setInterval возвращает id для интервала - так что вы можете его остановить.

Кроме того, setTimeout не приостанавливает выполнение программы. Таким образом, ваши последовательные вызовы на setTimeout все выполняются одновременно - через две секунды после звонка до slideshow.

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

function slideshow(){ 

    setTimeout(function(){ 
     backgroundElement.style.backgroundImage= "url('images/frontpage/maintenance_01.jpg')"; 
     setTimeout(function(){ 
      backgroundElement.style.backgroundImage = "url('images/frontpage/natural_steps_01.jpg')"; 
      setTimeout(function(){ 
       backgroundElement.style.backgroundImage = "url('images/frontpage/twnshp_bdg_01b.jpg')"; 
       slideshow(); 
      }, 2000); 
     }, 2000); 
    }, 2000); 
} 

slideshow(); 

Там, наверное, более изящный способ, но вы получите точку.

Edit:

Это может быть более изящным:

function slideshow() { 
    setTimeout (function(){backgroundElement.style.backgroundImage = "uri";}, 2000); 
    setTimeout (function(){backgroundElement.style.backgroundImage = "uri";}, 4000); 
    setTimeout (function(){backgroundElement.style.backgroundImage = "uri";}, 6000); 
    setTimeout (slideshow, 8000); 
} 

Водоизмещением секунды на 2. Вы можете даже сделать слайд-шоу функции немного более модульным, добавив массив URL, и времени -step, чтобы вы могли выполнять итерации setTimeout функций по набору URL-адресов.

Вроде как это (псевдокод)

function slideshow (urls, timestep){ 
    var i = 0; 
    for (; urls[i]; i++) 
     setTimeout (function(){ backgro... = urls[i];}, timestep * i); 

    setTimeout (slideshow, timestep * i); 
} 

slideshow (["url1", "url2", "url3"], 2000); 

Answer 2

Что касается вашего только видя третий слайд-шоу до:

Призывы setTimeout вернуться сразу после простого планирования другого кода для запуска.

Так что в вашем slideshow функции вы

1. график первый слайд, чтобы показать в 2-х секунд
2. затем сразу запланировать второй слайд, чтобы показать в 2-х секунд
3. затем сразу запланировать третий скользить, чтобы отображаться в течение 2 секунд

Второй слайд показывает наносекунды после первого, затем третьего, всего лишь наносекунды после второго. Вы можете увидеть только третий слайд!

EDIT

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

Сначала создайте слайд-шоу до цикл через изображения с помощью счетчика. В профессиональном JavaScript вы заключаете счетчик в закрытия так, чтобы не загрязнять глобальное пространство имен:

var slideshow = (function() { 
    var images = [ 
     'images/frontpage/maintenance_01.jpg', 
     'images/frontpage/natural_steps_01.jpg', 
     'images/frontpage/twnshp_bdg_01b.jpg' 
    ]; 
    var index = 0; 
    return function() { 
     backgroundElement.style.backgroundImage= "url(" + images[index] + ")"; 
     index = (index + 1) % images.length; 
     setTimeout(slideshow, 2000); 
    } 
}()); 

Теперь вам не нужно даже ждать 8 секунд, чтобы начать все. Вы можете уйти с этим:

window.onload = slideshow; 

Примечания нет не круглых скобок здесь, потому что вы не хотите, чтобы присвоить результат вызова slideshow к onload, вы хотите, чтобы функция OnLoad в бытьslideshow.