javascript - $(文档).ready() & $(function(){}

Question

我有两个功能:

function func1(){}

和

function func2(){}

这两个功能都需要以下内容才能工作

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

所以我将其实现为这两个功能，如下所示:

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

和

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

问题是什么？有两个；

1) 我已经有 $(function(){ 包装了上述两个函数，但我仍然需要 $(document).ready() ;为什么？两者不是同一件事吗？!

2) 我试图简化代码，只有 $(document).ready();"if need"和 $( window).resize(); 出现一次然后向其中添加函数，而不是将其添加到函数中。使困惑？好吧...

所以我基本上想这样做:

$(document).ready(func1,func2);
$(window).resize(func1,func2);

但是没有成功，有什么想法吗？

我的脚本:

$(function(){

   //Prevent clicking on .active & disabled links
   'use strict'; $('.active, disabled').click(function(e) {
      e.preventDefault();
   });

   //Off-canvas menu
   var $pages = $('#page, #secondHeader'),
       $header = $('#header'),
       $secondHeader = $('#secondHeader .menu-button');

   $secondHeader.on('touchstart click', function(e) {
      e.preventDefault();
      $pages.toggleClass("pageOpen");
      $header.toggleClass("headerOpen");
      $(this).toggleClass("menu-button-active");
   });

   $('#page').on('touchstart click', function() {
      $pages.removeClass("pageOpen");
      $header.removeClass('headerOpen');
      $secondHeader.removeClass("menu-button-active");
   });

   //Grid system
   var gridElement = $(".gridElement", "#grid3");
   (function() {
      $(document).ready(GalleryGrid);
      $(window).resize(GalleryGrid);
   })(jQuery);

   function GalleryGrid() {
      var grid3 = $('#grid3');
      var width = $(window).width();
      if (width < 1024 && width > 770) {
         var grid1 = $('#grid1');
         var grid2 = $('#grid2');

         for (var i = 0; i < gridElement.length; i++) {
            if (i < gridElement.length / 2) {
               grid1.append(gridElement[i]);
            } else {
               grid2.append(gridElement[i]);
            }
         }
      } else {
         grid3.append(gridElement);
      }
   }


   $(document).ready(fullScreen);
   $(window).resize(fullScreen);
   function fullScreen() {
       var newHeight = $("html").height() - $("#header").height() + "px";
       $(".fullscreen").css("height", newHeight);
   }

});

Answer 1

使用包装函数在同一事件上调用两个函数:

function go(){
    func1(); // Call function 1 and 2.
    func2();
}

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

或者，为了绝对确保文档已准备就绪，您甚至可以在就绪事件之后附加 resize 事件监听器:

$(document).ready(function(){
    $(window).resize(go);
});