Chênh lệch thời gian giữa fadeIn() delay() và fadeOut()

Question

Tôi đang cố gắng tính chênh lệch thời gian từ lúc dòng lệnh (3) bắt đầu và kết thúc, nhưng có vẻ như tôi sai, như dòng (7) cho thấy số không. Tôi hy vọng nó hiển thị 6500 (1500 + 3500 + 1500). hãy giúp tôi.

sd = new Date(); 
sdm = sd.getMilliseconds(); 
$(imgs).eq(i).fadeIn(1500).delay(3500).fadeOut(1500); 
ed = new Date(); 
edm = ed.getMilliseconds(); 
df = edm - sdm; 
document.getElementById('df').innerHTML = df; 

Lý do tôi đặt câu hỏi này là, tôi đang viết trình chiếu (rất đơn giản) và không hiển thị hình ảnh theo thứ tự đúng khi nhảy từ một đến khác.

Đây là HTML và JS của tôi.

$(document).ready(
     function() { 

      var i=0; 
      var imgs = $('#images ul').children(); 
      var j = imgs.length; 

      setInterval(function(){ runIt(); }, 6500); 

      function runIt() { 
       i = i + 1; 
       if (i == j) { i=0;} 

       $(imgs).eq(i).fadeIn(1500).delay(3500).fadeOut(1500); 
      } 

    }); 

<div id="slider"> 
    <ul> 
     <li><img src="images/slider/s1.jpg" /></li> 
     <li><img src="images/slider/s2.jpg" /></li> 
     <li><img src="images/slider/s3.jpg" /></li> 
     <li><img src="images/slider/s4.jpg" /></li> 
    </ul> 
</div> 

cảm ơn.

Answer 1

Cuộc gọi đến các chức năng hoạt ảnh trong jQuery là không đồng bộ. Bạn cần phải sử dụng chức năng gọi lại, như vậy:

$(element).fadeOut(delay, 
    function() { 
     // callback action 
    } 
); 

Tuy nhiên, điều này sẽ không hoạt động như mong đợi. getMilliseconds trả về mili giây đã trôi qua kể từ đầu giây, ví dụ: nếu thời gian hiện tại là 20: 18: 20.430, nó sẽ trả về 430. Bạn muốn sử dụng phương thức getTime thay thế. Nó trả về số mili giây kể từ Unix Epoch.

Vì bạn đang sử dụng jQuery, thay vì document.getElementById'ing, bạn có thể sử dụng ngắn gọn hơn $('#id').html('...');. Điều này để lại cho chúng tôi:

sd = new Date(); 
sdm = sd.getTime(); 
$(imgs).eq(i).fadeIn(1500).delay(3500).fadeOut(1500, 
    function() { 
     ed = new Date(); 
     edm = ed.getTime(); 
     df = edm - sdm; 
     $('#df').html(df); 
    } 
); 

Trình chiếu của bạn có thể cũng đã bị làm sai lệch vì điều này.

Một nitpick nhỏ liên quan đến đoạn mã thứ hai của bạn: trong var imgs = $('#images ul').children();, phương thức .children() trả về đối tượng jQuery. Bạn không cần phải thực sự chạy nó thông qua $() một lần nữa, nhưng bạn có thể nếu bạn nghĩ rằng đó là rõ ràng hơn.

imgs.eq(i).fadeIn(1500).delay(3500).fadeOut(1500); 

Answer 2

Tôi nghĩ rằng tôi đã tìm thấy câu trả lời. Nó hoạt động trong IE và Chrome. Tôi đã không kiểm tra trong FF.

$(document).ready(
    function() { 

     var i=0; 
     var imgs = $('#images ul').children(); 
     var j = imgs.length; 

     setInterval(function(){ runIt(); }, 5000); 

     function runIt() { 
      $(imgs).eq(i).fadeOut(1500) 
      i = i + 1; 
      if (i == j) { i=0;} 
      $(imgs).eq(i).fadeIn(1500); 
     } 

}); 

Cảm ơn tất cả nhận xét của bạn & đề xuất. Bằng cách này, nó sẽ không bị mắc kẹt hoặc nó sẽ không giữ một hình ảnh. Tôi nhìn vào fiddle Felix Kling của, hình ảnh đang biến mất và hình ảnh tiếp theo đến. Tôi muốn hình ảnh tiếp theo để pha trộn. Cảm ơn một lần nữa.