jQuery 结合 .ready 和 .resize答案

【问题标题】：jQuery combine .ready and .resizejQuery 结合 .ready 和 .resize
【发布时间】：2011-11-16 07:47:43
【问题描述】：

我的 jQuery .ready 函数中的一些（嗯，几乎所有）代码在调整窗口大小时也适用，因为它是布局工作。但是，既然是相同的代码，我该如何“组合”这两个函数，这样我的代码就不会重复自己（并且维护起来很混乱）？

谢谢！

【问题讨论】：

【解决方案1】：

以下代码可能有助于在resize is ready 之后执行操作。

var resizeTimer;

$(window).on('resize', function(e) {

  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {

    // Run code here after resizing has done
            
  }, 250);

});

以下是代码在调整大小时正在运行的问题。

$(window).on('resize', function(e) {
  // Run code here while resizing is under going
});

【讨论】：

【解决方案2】：

一个更好的选择

$(window).on("load resize",function(e){
  function abc() {
    // code here
  }
});

【讨论】：

load 与 ready 的工作方式不同，否则这将起作用。
只是为了澄清 UXCODA 的评论：load 和 resize 是 window DOM 对象的 onload 和 onresize 回调的回调 jQuery 包装器（分别）。 ready 是一个跟踪 DOMContentLoaded 事件的 jQuery 回调。 ready 将允许在 DOM 准备好后立即进行操作，而 window.onload 在生命周期中要晚得多。如果在这个处理程序中放入任何耗时的东西，它将导致 DOM 闪烁。 api.jquery.com/ready

【解决方案3】：

$(document).ready(myfunction);
$(window).on('resize',myfunction);

function myfunction() {
    // do whatever
}

另一种技术是.trigger()一个事件在另一个事件中：

$(window).on('resize',function() {
    // do whatever
});
$(document).ready(function() {
    $(window).trigger('resize');
});

如果您将代码放在页面底部以避免需要$(document).ready，它会变得更加简单：

$(window).on('resize',function() {
    // do whatever
}).trigger('resize');

【讨论】：

甚至更简单：$(window).resize(function() { //dowhatever }).resize();
@Kudla69 我总是更喜欢在 jQuery 中写 .trigger('thing') 而不是 .thing()，因为我觉得作为读者更清楚。
你这该死的天才
有没有办法在$(document).ready(myfunction);中触发多个函数？
@stinkysGTI 是的，创建一个匿名函数来一一调用它们。

【解决方案4】：

这样的？？

function mySetupFunction() {
    // stuff here.
}

$(document).ready(mySetupFunction);
$(window).resize(mySetupFunction);

【讨论】：