如何延迟 JavaScript 执行？答案

【问题标题】：How can I delay JavaScript from executing?如何延迟 JavaScript 执行？
【发布时间】：2016-08-23 12:20:01
【问题描述】：

我是 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，但这些并没有解决问题。我错过了脚本中的某些内容吗？

【问题讨论】：

来自the docs: "如果代码依赖于加载的资产（例如，如果需要图像的尺寸），则代码应放在@的处理程序中改为 987654326@ 事件。”
Documentation 声明“如果代码依赖于加载的资源（例如，如果需要图像的尺寸），则应将代码放在加载事件的处理程序中。”
@JuanMendes 请在此处删除重复项。这不是问题！这与all 图像无关。
有一个关于如何等待特定图像的示例stackoverflow.com/questions/15134468/… 请注意图像可能会被缓存，因此在您注册侦听器时可能已经触发了加载事件

标签： javascript jquery css

【解决方案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');
});

【讨论】：

如果你可以只使用窗口加载事件，那就太复杂了
仅当图像是动态创建时才需要。请注意，如果图像被缓存，加载事件可能不会触发。窗口上的加载事件已经等待所有图像
@JuanMendes This is only needed if the images are created dynamically 什么意思？
@A.Wolff 使用 windows load 事件等待所有资源加载。使用图像自己的load 事件可确保在图像加载时运行您的代码......这正是您想要的。
@A.Wolff 脚本可以异步加载（并且应该是，除非它们需要同步运行），并且样式表和子帧可能需要比图像更长的时间来获取（尤其是在图像被缓存的情况下）。

【解决方案2】：

改用：

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

【讨论】：

是的，这似乎是最好的方法。很惊讶我没想到这个 +1

【解决方案3】：

尝试使用“加载时”事件处理程序而不是 $(document).ready：

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

代替：

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

或者你可以使用：

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

处理这两个事件:)

【讨论】：

【解决方案4】：

我相信您正在寻找的是timeout() 函数。

如果我的理解是正确的，您可以调用window.timeout([function to call], [time in ms]，调用的函数将在代码执行后执行那么多毫秒。它不会像sleep() 那样等待。

【讨论】：

【解决方案5】：

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

W3C documentation

【讨论】：