如何使用2个脚本标记分离带/不带的jQuery函数

我对JS或jQuery不是百分之百的了解，我有一个关于如何分离函数的问题

我目前拥有以下功能：

$(window).scroll(function(){

  var wScroll = $(this).scrollTop();

  console.log(wScroll)

  var windowWidth = ($(window).width() / 8);
  var windowHeight = ($(window).height() / 16);

  $('.fore-card').css({
    'transform': 'translate(' + windowWidth*0 + 'px, ' + windowHeight*(-6) + 'px)',
  });
  $('.mid-card').css({
    'transform': 'translate(' + windowWidth*(-1) + 'px, ' + windowHeight + 'px)',
  });
  $('.back-card').css({
    'transform': 'translate(' + windowWidth*(2) + 'px, ' + windowHeight*(-12) + 'px)',
  });

});

正如你所看到的，我有一个滚动的监听器。我还有一些与页面滚动无关的函数。现在它确实起作用了，但是卷轴使我的对象产生了一些刺耳的声音，因此我需要将它们分开

我最初的想法是这样的：

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

我会的……但我不知道该怎么办

更新

根据这些评论，我是否可以假设这会起作用：

$(function(){

  var windowWidth = ($(window).width() / 8);
  var windowHeight = ($(window).height() / 16);

  $('.fore-card').css({
    'transform': 'translate(' + windowWidth*0 + 'px, ' + windowHeight*(-6) + 'px)',
  });
  $('.mid-card').css({
    'transform': 'translate(' + windowWidth*(-1) + 'px, ' + windowHeight + 'px)',
  });
  $('.back-card').css({
    'transform': 'translate(' + windowWidth*(2) + 'px, ' + windowHeight*(-12) + 'px)',
  });

  $(window).scroll(function(){

    var wScroll = $(this).scrollTop();

    console.log(wScroll)

  });

});

---

您可以将部分代码封装在需要分离关注点的立即调用函数表达式（IIFE）中

$(document).ready(function(){


           (function () {
          //somecode here
           }());

           (function () {
          //some other code here
           }());


});

---

如果只需列出两个函数，您就可以完全按照自己的想法进行操作：

$(document).ready(function(){

    $(window).scroll(function(){
        //your scroll function
    });

    //anything else
    // you can put functions, modules, object literals, etc. 

    var module = {
        func1 : function(){

        },
        func2 : function(){

        }
    };

    $("#someDiv").on( "click", module.func1 );
});

正如@A.B.所指出的，您可以使用IIEFs来避免污染全局名称空间。如果您的应用程序变大，您可以为其使用名称空间，例如应用程序：

var application = {};
application.main = ( function( $ ) {
    //module internals
    var count = 1,
    _someInternalFunc = function(){

    };

    //return public variables
    return{
      count: count,
      func1: function(){

      },
      func2: function(){

      }
    };
}( jQuery ) );

---

您可以将模块（例如application.main）移动到它们自己的文件中，并使用依赖项加载器将它们包括在内，以便它们按正确的顺序加载。研究函数、名称空间、模块模式和依赖项加载程序。另外，研究新的ES6模块格式，因为它将成为用JavaScript创建模块化、可导出函数的标准方式。

同意，或者只是创建简单的旧JS函数：@DaveKaye是的，这也会起作用，但我怀疑它们会污染通用范围变量etcWell，但那时你需要更好的计划。函数是基本的代码构建块，jQuery允许您在不真正了解它们如何工作的情况下使用它们。读一读他们可能会帮助OP看到问题是多么容易解决…好的。在你发布这篇文章几秒钟后，我重新编辑了我原来的问题。这会给我我需要的结果吗？