JQuery setInterval с динамическим массивом

Question

Это мое первое сообщение здесь, поэтому я не совсем уверен в том, что мой пост для публикации или остальная часть этого сообщения будет широкой или неопределенной.

Это мой номер 1 для решения моих проблем. но теперь я застрял. мне удалось собрать слайд-шоу jquery image (не плагин) из некоторого кода, который я нашел на этом сайте. Я сделал некоторые изменения здесь и там и добавил пару полей ввода. вот jsfiddle http://jsfiddle.net/8BRzr/48/ с моей проблемой.

я полагаю, что моя проблема заключается в setInterval части кода JQuery

$(function(){ 
    $('#addimage').click(function(){ 
    if($("#addimagefield").val().trim().length !='' && $("#image1").val().trim().length ==''){ 
     $("#image1").val($("#addimagefield").val().trim()); 
     $("#addimagefield").val(''); 
    } if($("#addimagefield").val().trim().length !='' && $("#image2").val().trim().length ==''){ 
     $("#image2").val($("#addimagefield").val().trim()); 
     $("#addimagefield").val(''); 
    } if($("#addimagefield").val().trim().length !='' && $("#image3").val().trim().length ==''){ 
     $("#image3").val($("#addimagefield").val().trim()); 
     $("#addimagefield").val(''); 
    } if($("#addimagefield").val().trim().length !='' && $("#image4").val().trim().length ==''){ 
     $("#image4").val($("#addimagefield").val().trim()); 
     $("#addimagefield").val(''); 
    } if($("#addimagefield").val().trim().length !='' && $("#image5").val().trim().length ==''){ 
     $("#image5").val($("#addimagefield").val().trim()); 
     $("#addimagefield").val(''); 
    } 
    image1 = $('#image1').val(); 
    image2 = $('#image2').val(); 
    image3 = $('#image3').val(); 
    image4 = $('#image4').val(); 
    image5 = $('#image5').val(); 

var arr = [ image1,image2,image3,image4,image5 ]; 
var images = $.grep(arr, function(n, i) { 
    return n != ''; 
}); 
var cur_image = 0; 
function changeBackground() { 
    cur_image++; 
    if (cur_image >= images.length) 
     cur_image = 0; 

    // change images 
    $('.featuredImages').css({ 
     backgroundImage: 'url(' + images[ cur_image ] + ')' 
    }); 
    $('.featuredImages .slide').fadeIn(2000, function(){ 
     $(this).css({ 
      backgroundImage: 'url(' + images[ cur_image ] + ')' 
     }).show(); 
    }); 

}; 
setInterval(changeBackground, 6000); 
}); 
}); 

После поиска я наткнулся на функцию SetTimeout() это кажется как то, что мне нужно, но я понятия не имею, где/как реализовать Это.

Любая помощь приветствуется, спасибо.

Answer 1

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

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

http://jsfiddle.net/8BRzr/49/