setTimeout bên trong khi vòng

Question

Tôi đã tìm kiếm cách sử dụng setTimeOut với các vòng lặp, nhưng không có nhiều cách sử dụng nó trong khi vòng lặp, và tôi không thấy lý do tại sao nên có nhiều sự khác biệt. Tôi đã viết một vài biến thể của mã sau đây, nhưng vòng lặp này dường như làm hỏng trình duyệt:

while(src == '') 
{ 
    (function(){ 
     setTimeout(function(){ 
     src = $('#currentImage').val(); 
     $("#img_"+imgIdx).attr('src',src); 
     }, 500); 
    }); 
} 

Tại sao? Về cơ bản, tôi có một hình ảnh được tạo động với thuộc tính nguồn cần thời gian để tải, vì vậy trước khi tôi có thể hiển thị nó, tôi cần tiếp tục kiểm tra xem nó có được tải hay không và chỉ khi đường dẫn có sẵn trong $('#currentImage'), thì để tôi hiển thị nó.

Mã này đã làm việc tốt trước khi tôi sử dụng một vòng lặp while, và khi tôi trực tiếp làm

setTimeout(function(){ 
    src = $('#currentImage').val(); 
    $("#img_"+imgIdx).attr('src',src); 
}, 3000); 

Nhưng tôi không muốn phải làm cho người dùng chờ 3 giây nếu tải có thể được thực hiện nhanh hơn, do đó tôi đặt setTimeOut trong một vòng lặp while và rút ngắn khoảng thời gian của nó, để tôi chỉ kiểm tra đường dẫn được tải sau mỗi nửa giây. Có chuyện gì vậy?

Answer 1

Cảm ơn mọi người - tất cả các đề xuất đều hữu ích. Cuối cùng, tôi đã sử dụng setInterval như sau:

var timer; 
// code generating dynamic image index and doing ajax, etc 
var checker = function() { 
    var src = $('#currentImage').val(); 
    if(src !== '') { 
    $('#img_' + imgIdx).attr('src', src); 
     clearInterval(timer); 
    } 
}; 

timer = setInterval(checker, 500); 

Answer 2

Vấn đề có thể là bạn không kiểm tra mỗi nửa giây.

setTimeout lên lịch một hàm để chạy vào một thời điểm trong tương lai, nhưng nó không chặn, nó chỉ chạy sau. Vì vậy, trong vòng lặp của bạn trong khi bạn đang lập kế hoạch các chức năng để chạy nhanh như nó có thể lặp qua vòng lặp while, vì vậy bạn có thể tạo ra tấn của chúng.

Nếu bạn thực sự muốn kiểm tra sau mỗi nửa giây, hãy sử dụng setInterval mà không có vòng lặp thay thế.

Answer 3

Vòng lặp while đang tạo ra sự cố, như jrdn đang chỉ ra. Có lẽ bạn có thể kết hợp cả setInterval và setTimeout và khi src được lấp đầy, hãy xóa khoảng thời gian. Tôi đã đặt một số mã mẫu ở đây để trợ giúp, nhưng tôi không chắc chắn rằng nó có hoàn toàn phù hợp với mục tiêu của bạn hay không:

var src = ''; 
    var intervalId = window.setInterval(
     function() { 

      if (src == '') { 
       setTimeout(function() { 
        //src = $('#currentImage').val(); 
        //$("#img_" + imgIdx).attr('src', src); 
        src = 'filled'; 
        console.log('Changing source...'); 
        clearInterval(intervalId); 
       }, 500); 
      } 
      console.log('on interval...'); 
     }, 100); 

    console.log('stopped checking.'); 

Hy vọng điều này sẽ hữu ích.