How to Separate jQuery Functions w/o Using 2 Script Tags -


i'm not 100% knowledgeable in js or jquery, , have question how separate functions.

i have function:

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

as can see have listener scroll. have functions have nothing scroll of page. work, scroll causing jankiness objects, hence why need separate them.

i thought this:

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

would it...but i'm not sure how go this.

update

based off of comments, assume work:

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

if simple listing 2 functions, can thinking:

$(document).ready(function(){      $(window).scroll(function(){         //your scroll function     });      //anything else     // can put functions, modules, object literals, etc.       var module = {         func1 : function(){          },         func2 : function(){          }     };      $("#somediv").on( "click", module.func1 ); }); 

as @a.b. notes, can use iiefs avoid polluting global namespace. if app grows larger, can use namespace it, e.g. application:

var application = {}; application.main = ( function( $ ) {     //module internals     var count = 1,     _someinternalfunc = function(){      };      //return public variables     return{       count: count,       func1: function(){        },       func2: function(){        }     }; }( jquery ) ); 

and can move modules (e.g. application.main) own files , include them dependency loader load in proper order. study functions, namespaces, module pattern, , dependency loaders. also, study new es6 module format, become standard way create modular, exportable functions in javascript.


Comments

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - Cannot secure connection using TLS -