jQuery结合.ready和.resize

Question

我jQuery的.ready()函数中的大部分（实际上是全部）代码也适用于窗口大小调整时，因为它是布局工作。然而，由于代码相同，我该如何“合并”这两个函数，以便我的代码不会重复自己（而且很难维护）？

谢谢！

- user825286

Answer 1

$(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');

- Blazemonger

---

甚至更简单：$(window).resize(function() { //做任何事情 }).resize(); - Jamie Kudla

我总是更喜欢在jQuery中编写.trigger('thing')而不是.thing()，因为我认为这样更容易阅读明白。 - Blazemonger

你个天才 - user1099258

有没有办法在 $(document).ready(myfunction); 中触发多个函数？ - stinkysGTI

@stinkysGTI 是的，创建一个匿名函数，逐个调用它们。 - Blazemonger

@Blazemonger 那正是我最终做的，谢谢 :) - stinkysGTI

Answer 2

更好的选择

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

- karan mehta

---

load 和 ready 的工作方式不同，否则这个就可以工作了。 - UXCODA

仅供澄清UXCODA的评论：load和resize是jQuery回调包装器，用于window DOM对象的onload和onresize回调（分别）。ready是一个jQuery回调，跟踪DOMContentLoaded事件。ready将允许在DOM准备就绪时立即进行操作，而window.onload则要晚得多。如果在此处理程序中放置了任何耗时的内容，它将导致DOM闪烁。 https://api.jquery.com/ready/ - Blake Neal

Answer 3

像这样吗？

function mySetupFunction() {
    // stuff here.
}

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

- mellamokb

Answer 4

以下代码可能有助于在调整大小完成后执行操作。

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
});

- caot