why is my callback executing immediately?

[1DMF]

Trying to resolve the issues with my previous post, I thought I would introduce a callback... ( I know it doesn't fix the problem but it might be an acceptable compromise)

So I have an object for holding file selected info

var fileObj = {
    maxSize:1,
    fileType:'img',
    fileInvalid:'Only image files (GIF / PNG / JPG) allowed.',
    imgWidth:200,
    imgHeight:584,
    callback:displayBanner
}; // file object settings

this is the displayBanner callback...

// display selected banner for upload
function displayBanner()
{
   console.log(fileObj.file.src);
    if(fileObj.file.src)
    {
        $('#right').html('<img src="', fileObj.file.src,'" title="',$('#tooltip').val(),'" />"');         
    }    

}

So when the file is selected I have the onload event run for the image and then fire my callback...

            // set up a fileReader object and image object
            var reader = new FileReader();
            fObj.file = new Image();
            
            // load event to capture the file information.
            reader.onload = (function(file) {
                fObj.file.src = file.target.result;
                // load event to check image dimensions                
                fObj.file.onload = function(){                   
                    if(this.width != fObj.imgWidth || this.height != fObj.imgHeight)
                    {
                        showDialog({content:'Image dimensions invalid. Must be (Width: ' + fObj.imgWidth + 'px, Height:' + fObj.imgHeight + 'px)'});
                        clearFile(ele);
                        fObj.file = undefined;                        
                    } 
                    else
                    {
                        [b][u]try{fObj.callback}[/u][/b]
                        catch(e){}
                    }                    
                };
            });
            
            // read selected file
            reader.readAsDataURL(myFile);

But the callback is running the millisecond a file is selected, which means it isn't firing from within the onload event of the image, but is firing when the function is being assigned to the onload event.

Why? How do you write code to execute a callback function from within a holding variable without the function firing just by mentioning the variable?

I thought this was to do with using parentheses, but there aren't any involved so it can't be?

Thanks,
1DMF







"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[1DMF]

Well I thought I would do away with the callback and implement an event instead, what I have found is this code is firing twice in some weird kind of recursion, why?

            var reader = new FileReader();
            fObj.file = new Image();
            
            // load event to capture the file information.
            reader.onload = (function(aFile) {
                
                // load event to check image dimensions                
                fObj.file.onload = function(){                   
                    if(this.width != fObj.imgWidth || this.height != fObj.imgHeight)
                    {
                        showDialog({content:'Image dimensions invalid. Must be (Width: ' + fObj.imgWidth + 'px, Height:' + fObj.imgHeight + 'px)'});
                        clearFile(ele);
                        fObj.file = undefined;                        
                    } 
                    else
                    {
                        ele.trigger('imageLoaded',fObj);
                    }                    
                };
                
                fObj.file.src = aFile.target.result;
                                
            });
            
            // read selected file
            reader.readAsDataURL(myFile);

this is ran twice

ele.trigger('imageLoaded',fObj);

because in the listener event...

        $('body').on('imageLoaded','#file',function(e,fObj){
             showFileDetails(fObj);
             displayBanner(fObj);
        });

is causing displayBanner to run twice...

as I have

// display selected banner for upload
function displayBanner(fObj)
{
    huh++;
    alert('huh = ' + huh);
    console.log(fObj);
    if(fObj.file.src)
    {
        $('#right').html('<img src="', fObj.file.src,'" title="',$('#tooltip').val(),'" />"');         
    }    

}

when I select a file, the alert goes..

1st alert : huh = 2
2nd alert : huh = 1

How is that possible?




"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[1DMF]

ok...step away from the computer...

I was right, it was not possible for it to be triggered twice in some kind of recursion... I had removed, but forgot to save the script with the original JQuery change event handler

// upload file selected 
$('body').on('change','#file',function() {
    // validate selected file
    if(fileSelected( $(this), fileObj ))
    {
        // show selected file.
        $(this).removeClass('invalid').addClass('valid');
        [highlight #FCE94F]displayBanner();[/highlight]
    }
    else
    {
        $(this).removeClass('valid').addClass('invalid');
    }
    
});

So of course the displayBanner was firing twice from the old call above and the new event based method

        $('body').on('imageLoaded','#file',function(e,fObj){
             showFileDetails(fObj);
             displayBanner(fObj);
        });

... perhaps I should start wearing my glasses again

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music