如何延遲執行JavaScript？

Question

我是JavaScript的新手，為此我深有感觸。

問題的演示在這里： http : //codepen.io/sol_b/pen/PzgdWy

這是腳本：

var sections = function() {
  $('.image').each(function() {
    var $this = $(this),
        x = $this.find('img').width()
    $this.width(x);
  });
};

$(document).ready(function() { 
  sections();
 });

$(window).resize(function() {
  sections();
})

計算圖像的寬度並將其分配給圖像的容器。 想法是，圖像行將始終保持其縱橫比，而容器之間沒有間隙。

問題是代碼在大約50％的時間內失敗，並且圖像只是擠壓在一起。 調整窗口大小可以修復該問題，因此我認為這與加載順序有關。

我嘗試使用window.onload和img.onload而不是document.ready，但是這些並不能解決問題。 我錯過了劇本中的某些內容嗎？

Answer 1

在圖像上使用load並計數直到全部加載完畢，然后執行功能。

var images $('.image');
var amount = images.length;

images.on('load', function() {
    if( --amount == 0 ) {
        sections();
    }
});

為了防止從偵聽器執行緩存的圖像，您可以手動觸發它們（ 甚至在window.load ）。 這些行將觸發緩存元素的事件：

images.each(function() {
    $(this).complete && $(this).trigger('load');
});

Answer 2

改用：

$(window).on('load resize', sections);

Answer 3

嘗試使用“加載”事件處理程序代替$（document）.ready：

$(window).on('load', function() { 
  sections();
});

代替：

$(document).ready(function() { 
  sections();
});

或者您可以使用：

$(window).on('load resize', function() { 
  sections();
});

處理兩個事件：）

Answer 4

我相信您正在尋找的是timeout()函數。

如果我的理解是正確的，您可以調用window.timeout([function to call], [time in ms]並且要執行的函數將在執行代碼后執行那么多毫秒。它不會像sleep()那樣等待。

Answer 5

setTimeout(
    function(){
        console.log("this line will be logged with 1000ms delay");
    },1000
)

W3C文檔