Jquery에서 for 루프를 지연하는 방법

Question

이미지 갤러리를 만들고 있는데 for 루프를 사용하여 모든 이미지를로드하고 있습니다. 하지만 지금은 문제가 발생하여 매번 루프가 지연되기를 원합니다.

시간 제한을 설정하려고했지만 작동하지 않습니다.
누군가 Jquery를 사용하여 루프를 지연시키는 방법을 알고 있습니다.

JS 코드 :

function test(){ 
var src = 'img/nature/'; 
var img = ['1.jpg']; 
var image = [ "1.jpg", "2.jpg", "3.jpg",'4.jpg','5.jpg','6.jpg','7.jpg' ]; 
    for (var i = 0; i < image.length; i = i + 1) { 
    $('#frame').append('<img class="tile hide" src="'+src + image[ i ]+ '">'); 
    $('.hide').show(500); 
     setTimeout(function(){ 

     },500); 
    } 

} 

그리고 나는 다른 질문이 있습니다. Jquery를 사용하여 폴더에있는 모든 imags를로드 할 수 있습니까?

Answer 1

당신이 시도 할 수 있습니다 : 무엇이든에 마지막

function test() { 
    var src = 'img/nature/'; 
    var img = ['1.jpg']; 
    var image = [ '1.jpg', '2.jpg', '3.jpg','4.jpg','5.jpg','6.jpg','7.jpg' ]; 

    setInterval(function() { 
     $.each(image, function(index, value) { 
      $('#frame').append('<img class="tile hide" src="'+src + value + '">'); 
      $('.hide').show(500); 
     }); 
    }, 500); 
} 

변경 500 ...

그러나 나는 이것이 당신이하고 싶은 것이 아니라고 생각합니다 ... 아래 접근법은 당신이 원하는 것일 수 있습니다 :

function test() { 
    var src = 'img/nature/', 
     img = ['1.jpg'], 
     image = [ '1.jpg', '2.jpg', '3.jpg','4.jpg','5.jpg','6.jpg','7.jpg' ], 
     maxIndex = (image.length - 1), 
     cIndex = 0; 

    setInterval(function() { 
     if (cIndex == maxIndex) 
      cIndex = 0; 
     $('#frame').append('<img class="tile hide" src="'+src + image[cIndex] + '">'); 
     $('.hide').show(500); 
     cIndex++; 
    }, 500); 
} 

Answer 2

대신 루프를 사용하는 재귀 기능을 사용할 수 있습니다

var src = 'img/nature/'; 
var img = ['1.jpg']; 
var image = [ "1.jpg", "2.jpg", "3.jpg",'4.jpg','5.jpg','6.jpg','7.jpg' ]; 
var i = 0; 
var showGallery = function(){ 
    $('#frame').append('<img class="tile hide" src="'+src + image[ i ]+ '">'); 
    $('.hide').show(500); 
    i++; 
    if (i<image.length){ 
     setTimeout(showGallery,500); 
    } 
}; 

if (image.length > 0){ 
    showGallery(); 
} 

Answer 3

슬라이드 쇼는 500 밀리 초 동안 만 사용됩니다. 그 값을

에서 늘리십시오.

setTimeout (function() {}, 500); 슬라이드 쇼가 지연됩니다.

& 루프 내에서 기능 테스트를 호출하면 슬라이드 쇼가 계속됩니다.

샘플 :

함수 slideit() {

if (!document.images) 
return 0 
document.images.slide.src=eval("image"+step+".src") 
if (step<3) 
step++ 
else 
step=1 

setTimeout("slideit()",3000) 

}

Answer 4

다른 방법은 타임 아웃 이벤트에 대한 시간 값을 증가 일시적인 범위를 사용하는 것이다 ..

function test(){ 
    var src = 'img/nature/'; 
    var img = ['1.jpg']; 
    var image = [ "1.jpg", "2.jpg", "3.jpg",'4.jpg','5.jpg','6.jpg','7.jpg' ]; 
    for (var i = 0; i < image.length; i++) { 
     (function(i){ 
      setTimeout(function(){ 
       $('#frame').append('<img class="tile hide" src="'+src + image[ i ]+ '">'); 
       $('.hide').show(500); 
      }, 500*i); 
     })(i); 
    } 
}