Jquery setInterval quá nhanh khi đến từ một tab khác

Question

Tôi có một trang web có hình ảnh trượt không ngừng sử dụng hàm setIntervall() của jquery.

Khi gọi trang trong Chrome 13 và tôi chuyển sang tab khác để quay lại sau vài giây, hình ảnh trượt đang diễn ra nhanh hơn, như thể nó cố gắng theo kịp vị trí nếu nó không chuyển sang trang khác chuyển hướng.

Tôi làm cách nào để giải quyết vấn đề này?

$(window).load(function() { 
    setInterval(nextSlide, 3500); 
}); 

function nextSlide(){ 
    offset += delta; 
    $("#slideContent").animate({left: -1 * offset}, 1000); 
} 

Giải pháp:

tôi đã chọn tư vấn đầu tiên jfriend00 của. Bây giờ tôi tắt bộ hẹn giờ khi cửa sổ trở nên không hoạt động.

Mã đơn giản để làm như vậy có thể được tìm thấy here.

Answer 1

Lúc đầu, tôi muốn xin lỗi vì tất cả các lỗi - tiếng Anh của tôi không hoàn hảo.

Các giải pháp của vấn đề của bạn có thể rất đơn giản:

$(window).load(function() { 
    setInterval(nextSlide, 3500); 
}); 

function nextSlide(){ 
    offset += delta; 
    $("#slideContent").stop(true,true).animate({left: -1 * offset}, 1000); 
} 

tab trình duyệt hoạt động đệm một số chức năng setInterval hoặc setTimeout. dừng (đúng, đúng) - sẽ ngừng tất cả các sự kiện được lưu vào bộ đệm và thực thi không chỉ các hoạt ảnh cuối cùng. Vấn đề này cũng sẽ xuất hiện trong Firefox> 5.0 - đọc bài viết này: Firefox 5 - changes

Phương pháp window.setTimeout() bây giờ kẹp để gửi không quá một timeout mỗi giây trong các tab không hoạt động. Ngoài ra, hiện tại, kẹp được kẹp thời gian chờ lồng nhau với giá trị nhỏ nhất được đặc tả HTML5 cho phép: 4 ms (thay vì 10 mili giây được sử dụng để kẹp).

tại đây bạn có thể đọc, cách hoạt động của animate - nó kích hoạt chức năng setInterval nhiều lần. How animate really works in jQuery

Answer 2

Phiên bản Chrome mới nhất dường như làm chậm hoạt động của setInterval khi trang được tab ở chế độ nền và sau đó khi bạn đưa trang đó về phía trước, nó cố gắng bắt kịp.

Trên blog Chromium, Google cho biết:

Trong thời gian tới Chrome 11 ra mắt, chúng tôi có kế hoạch để giảm tiêu thụ CPU ngay cả đối với các trang được sử dụng setTimeout và setInterval. Đối với các tab nền, chúng tôi dự định chạy từng bộ hẹn giờ độc lập không quá một lần mỗi giây. Thay đổi này đã được triển khai trong kênh phát triển Chrome và xây dựng canary.

Khoảng thời gian của bạn là 3,5 giây, nhưng hoạt ảnh có thể sử dụng bộ tính giờ ngắn hơn nhiều.

cách có thể để làm việc xung quanh nó:

• Ngưng hẹn giờ của bạn/hoạt hình khi cửa sổ là không nhìn thấy được. Khởi động lại bộ đếm thời gian/hoạt ảnh khi cửa sổ hiển thị.
• Thay vì setInterval, sử dụng setTimeout và sau đó chỉ cần đặt lại setTimeout mỗi lần nó tạo ra khoảng thời gian lặp của riêng bạn - mặc dù trong trường hợp của bạn, có thể sử dụng bộ hẹn giờ của jQuery là vấn đề - tôi không biết.
• Làm chậm bộ hẹn giờ của bạn xuống để chúng không chạy được điều này (một lần nữa có thể nằm bên trong jQuery không phải là bộ đếm thời gian của riêng bạn).

Tùy chọn tốt nhất có thể là tìm ra thời điểm dừng và sau đó khởi động lại hoạt ảnh.

Câu hỏi tương tự tại đây: Chrome: timeouts/interval suspended in background tabs?.

FYI, Chrome có API thử nghiệm mới để phát hiện khả năng hiển thị trang vì lý do này. Bạn có thể đọc về nó ở đây: http://code.google.com/chrome/whitepapers/pagevisibility.html. nó giúp giải quyết vấn đề khi trang của bạn hiển thị, nhưng không có tiêu điểm.

Answer 3

Bạn đã thử không sử dụng setInterval hoặc setTimeout chút nào, nhưng chỉ cần sử dụng chức năng complete của chức năng animate để khởi động trang trình bày tiếp theo? Hàm delay được đặt thành 2500 (tức là 1000 cho animate trừ từ 3500 của setInterval). Tôi đã không thử nó với Chrome, vì vậy xin vui lòng cho tôi biết nếu nó hoạt động.

var slider = function(n){ 
    $("#slideContent").delay(2500).animate({left: -1 * n * delta}, 
              1000, 
              function(){slider(n+1)} 
             ); 
}; 
slider(1); 

Answer 4

Bạn đang sử dụng Jquery 1.6?

Đây có thể là nguyên nhân kể từ 1.6 sử dụng requestAnimationFrame cho hoạt ảnh. Bạn có thể muốn kiểm tra trang này ra cho một sự thay thế cho setInterval, clearInterval

http://blog.blenderbox.com/2011/06/24/jquery-1-6-1-and-setinterval/

mã: https://gist.github.com/1002116 [sửa: cập nhật nguồn, edit2: hiện công việc doesnt với firefox do firefox lỗi. - Tôi đã làm hạ cấp xuống JQuery 1,5]

Từ blogger:

Sau đó, nơi bạn được gọi setInterval (func, thăm dò), bây giờ bạn gọi requestInterval (func, thăm dò). Nơi bạn gọi clearInterval (interval), bây giờ bạn gọi clearRequestInterval (interval);

Answer 5

thử setInterval() nó hoạt động

<script type="text/javascript" src="js/jquery-1.5.js"></script> 
     <script type="text/javascript"> 
      var i=1; 
      $(document).ready(function(){ 
       slideShow(); 
       $("#next").click(function(){ 
        slideShow(); 
       }); 
      }); 
      function slideShow(){ 
       if(i<3){ 
        $("#slide-container").animate({ left:"+=35px" }, { duration:500}) 
        $("#slide-container").animate({ left:"-=735px" }, { duration:250}) 
        i++; 
       } 
       else { 
        $("#slide-container").animate({ left:"+=1400px" }, { duration:1000}) 
        i=1; 
       } 
       setTimeout('slideShow()',2000); 
      } 
    </script>