How do you re-use Javascript scripts?

Question

I've got a calculation script that executes when the page loads, but also when the window gets resized. The code in between is exactly the same; not re-used.

So I was wondering, not if, but how do I re-use Javascript code?

I've tried a few stuff, like the next piece, but that ain't working.

$(function reUse() {
    alert('Either the page got resized or the page loaded!');
    console.log('Either the page got resized or the page loaded!');
});

$(window).resize(function() {
    reUse();
});

So what should be the correct way of formatting?

giorgio · Accepted Answer · 2014-04-01 08:33:48Z

2

You should put the function outside of the closure. You are now adding the function as a jQuery object. The way to go would be:

var reUse = function() {
    alert('Either the page got resized or the page loaded!');
    console.log('Either the page got resized or the page loaded!');
};

$(window).resize(function() {
    reUse();
});

And you'll want to wrap it all in a closure:

jQuery(document).ready(function($) {
    // the code above
});

answered Apr 1, 2014 at 8:33

giorgio

10.2k2 gold badges30 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sander Schaeffer Over a year ago

I assume that also applies for the actual code; write it as a variable and re-use that in the functions where it's needed? -> pastebin.com/MaLYCMc9 - Thanks! - And second! Why 'jQuery(document).ready(function($)' instead of $(document).ready(function() {}); - Which seems shorter?

giorgio Over a year ago

yup, looks good! in javascript you can put everything in a variable: a primitive value, object or function. So anything you'd like to use again, put it in a variable!

adeneo · Accepted Answer · 2014-04-01 08:34:29Z

2

You're missing a few parenthesis etc, and you can just trigger event handlers

$(function() {
    function reUse() {
        alert('Either the page got resized or the page loaded!');
        console.log('Either the page got resized or the page loaded!');
    }

    $(window).on('resize', reUse).trigger('resize');
});

answered Apr 1, 2014 at 8:34

adeneo

319k29 gold badges410 silver badges392 bronze badges

2 Comments

Sander Schaeffer Over a year ago

Why "$(window).on('resize', reUse).trigger('resize');" instead of $(window).resize(function() { reUse(); }); ? Using .trigger() seems a little overdone, since .resize() is enough?

adeneo Over a year ago

@SanderSchaeffer - It's to trigger the function both on pageload and on resize

mguimard · Accepted Answer · 2014-04-01 08:32:08Z

1

Write it like this

function reUse() {
    alert('Either the page got resized or the page loaded!');
    console.log('Either the page got resized or the page loaded!');
}

$(window).resize(reUse);

answered Apr 1, 2014 at 8:32

mguimard

1,89913 silver badges14 bronze badges

2 Comments

John Dvorak Over a year ago

Why would the asker's version fail, though?

mguimard Over a year ago

Because of the visibility of the reUse function, please read stackoverflow.com/questions/500431/javascript-variable-scope

Mehran Hatami · Accepted Answer · 2014-04-01 08:32:50Z

1

try to make it global, in your scope:

var reUse;
$(reUse = function reUse() {
    alert('Either the page got resized or the page loaded!');
    console.log('Either the page got resized or the page loaded!');
});

$(window).resize(function() {
    reUse();
});

or for the second use, if you don't have any special parameter to pass to your function:

$(window).resize(reUse);

answered Apr 1, 2014 at 8:32

Mehran Hatami

13k6 gold badges31 silver badges36 bronze badges

Collectives™ on Stack Overflow

How do you re-use Javascript scripts?

4 Answers 4

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related