Javascript JQuery best practise for functions

Question

I'm trying out github and thpught i would put a small test project up there. Since it is public i ran i through JSHint but i get an error that i can't shake:

Line 21 preloadImages();

'preloadImages' is not defined.

This is the code:

$(function() {

    var allImagesLoaded = false, imagesLength = 0, counter = 0, imageArray = [], loadedImages = [], loadedImagesCounter = 0;

    /*--------------------------------
    Add your images to the array
    and your good to go
    --------------------------------*/
    imageArray = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"];
    imagesLength = imageArray.length;

    if(imagesLength === 0) {
        $('#container').html('<p><strong>You need to put some images in your array</strong></p>');
    }
    else {

        preloadImages();
    }

    function preloadImages() {
        var tempImage = $("<img />").attr("src", imageArray[loadedImagesCounter]);

        tempImage.load(function(){

            loadedImages.push(this);
            loadedImagesCounter++;
            if(loadedImagesCounter == imagesLength) {
                imageArray = loadedImages;
                initEverything();
            }
            else {
                if(!allImagesLoaded)
                {
                    preloadImages();
                }
            }       
        });
    }

    function initEverything() {


        allImagesLoaded = true;
        $('#preloadingImages').hide();

        // Deactivate the context menu that appears on right click
        $(document).bind("contextmenu", function(e) {
            return false;
        });

        var theSource = $(imageArray[0]).attr('src');

        var theImage = $('<img />');
        $(theImage)
            .attr('src', theSource)
            .attr('width', imageArray[0].width)
            .attr('height', imageArray[0].height)
            .attr('alt', 'demobild 1')
            .attr('id', 'pageImage');

        $('#container').append(theImage)

        $("#pageImage").mousedown(function(e) {
            if (allImagesLoaded) {
                switch (e.which) {
                    case 1:
                        stepForward();
                        break;
                    case 2:
                        // center button on the mouse
                        break;
                    case 3:
                        stepBackward();
                        break;
                    default:
                        // Nada
                }
            }
        });
        $(document).keydown(function(e) {
            e.preventDefault();
            if (allImagesLoaded) {
                switch (e.keyCode) {
                    case 37: // Left
                        stepBackward();
                        break;
                    case 38: // Up
                        stepBackward();
                        break;
                    case 39: // Right
                        stepForward();
                        break;
                    case 40: // Down
                        stepForward();
                        break;
                    default:
                        // Nada
                }
            }
        });

    }

    function stepForward() {

        if (counter === imagesLength-1) {
            counter = 0;
        } else {
            counter++;
        }
        $("#pageImage").attr("src", $(loadedImages[counter]).attr('src'));
        $("#pageImage").attr("alt", "demobild " + counter);
    }

    function stepBackward() {

        if (counter === 0) {
            counter = imagesLength-1;
        } else {
            counter--;
        }
        var sourcePath = $(imageArray[counter]).attr('src');
        $("#pageImage").attr("src", sourcePath);
        $("#pageImage").attr("alt", "demobild " + counter);
    }

});

Where is best practise to put functions? At the top?

Here is my project https://github.com/Benjaminsson/Image-expo

@Daniel: No. It's a regular function.

ThiefMaster
– ThiefMaster

2011-09-19 11:41:14 +00:00
Commented Sep 19, 2011 at 11:41 — ThiefMaster
– ThiefMaster, Commented Sep 19, 2011 at 11:41

ThiefMaster · Accepted Answer · 2011-09-19 11:40:50Z

1

JavaScript hoists function declarations to the beginning of the scope. So the function is available in the whole scope (the function passed to $()) no matter where it is defined. JSLint might not detect this properly and think the function in undefined at the point you are calling it.

answered Sep 19, 2011 at 11:40

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

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

3 Comments

Raynos Over a year ago

JSLint/JSHint would have to make two passes (one to hoist functions and one to parse the document). They don't. However for readability sake it's still valuable to place functions at the top

Johan B Over a year ago

So best practice would be this order? Variables, functions, init code?

ThiefMaster Over a year ago

It doesn't matter. Do it in the way to make it most readable.

BenMorel · Accepted Answer · 2013-12-12 10:16:53Z

1

Your code worked because JavaScript runtime will first hoist all named function before code execution:

alert(typeof(preloadImages)); // "function
function preloadImages() {
    // your code
}

Best practice would be putting all your named function at the top of an execution scope; In your case it's after the first line: $(function() {

This is to avoid any possible confusions.

Read more at http://www.adequatelygood.com/2010/2/JavaScript-Scoping-and-Hoisting

edited Dec 12, 2013 at 10:16

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Sep 19, 2011 at 11:58

Kenny Ki

3,4402 gold badges28 silver badges30 bronze badges

Comments

lonesomeday · Accepted Answer · 2011-09-19 11:46:40Z

0

Some people think it is a good idea to put all your function definitions and variable declarations at the top of their scope (i.e. at the beginning of the function). This is because the Javascript interpreter will do that, wherever your code is, and it helps to avoid confusing errors if your code is as close as possible to the interpreter's understanding of it.

This is a stylistic choice; you are free to ignore it. With JSHint, you can deselect the "Require variables to be declared before usage" option, and your code will pass.

(Well, it will when you correct the other error JSHint reports!)

answered Sep 19, 2011 at 11:46

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Collectives™ on Stack Overflow

Javascript JQuery best practise for functions

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related