$（document）.ready（）＆amp; $（函数（）{}

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();“如果需要”和$(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);

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

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

Answer 2

这样做。

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

只需调用fullScreen()之类的函数，无需使用$（document）.ready。

对于Gallery Grid

从您的代码中删除。无需再调用（function（）{}）两次。

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

Answer 3

我建议使用匿名函数来完成这项工作。

例如：

$(document).ready(function() {
    1();
    2();
});

这应该是一个很好的起点。

Answer 4

（function（）{...}）（）;

它不等同于document.ready。这里没有必要DOM准备好了。当浏览器解释你的ecma- / javascript时，它是匿名函数，它会尽快调用它。

更好并建议使用document.ready（）：

$(document).ready(function(){
fullScreen();

//other code

});

Answer 5

不要

请勿在{{1​​}}内拨打$(document).ready()，这没有意义。 $(document).ready()内的代码不会立即执行。它计划在以后的某个时间执行（当文档准备好时）。

调用

$(document).ready(/* the code here */)

就像说“等到文档准备就绪，执行此操作，等到文档准备好做某些功能，然后执行此操作。”

文件$(document).ready(function() { //do this $(document).ready(some_function) //do that }); 事件：

ready

只是一个快捷方式/简写：

$(function(){})

$(document).ready(function(){}) 是一个事件。它属于ready对象，在文档准备就绪时会触发。

要在文档准备就绪时注册要调用的两个函数，只需执行以下操作：

document

或

$(document).ready(function() {
    func1();
    func2();
});

或者

$(function() {
    func1();
    func2();
});

或者

function func3() {
    func1();
    func2();
}
$(document).ready(func3);

Window function func3() { func1(); func2(); } $(func3); 事件：

resize是一个事件。它属于resize对象，并在调整窗口大小时触发。

要调整窗口大小调整时要调用的两个函数，请执行以下操作：

window

或者

$(window).resize(function() {
    func1();
    func2();
});