JavaScript: eval a function inside other function

Question

I have a image dimensions calculation function which returns scaled image dimension values when it's executed. (note: the list of images and their dimensions are accessed from the arrays.)

function setDesiredDimensions() {
                var width = Math.min(imagesOrigWidths[currindex], desiredWidthLimit);
                var height = Math.ceil((width / imagesOrigWidths[currindex]) * imagesOrigHeights[currindex]);

                some more calculation code here...

                return {width:width,height:height};
            }     

var size = setDesiredDimensions(imagesOrigWidths[currindex], imagesOrigHeights[currindex]);

Then I have some buttons in HTML:

<a id="button1"></a>
<a id="button2"></a>
<a id="button3"></a>

And various onclick events on these buttons, such as:

$('#button1').click( function() {
     currindex = (currindex+1) % max;

     **I need to evaluate setDesiredDimensions function here **

     $("#imageswap").attr({src: imgSrcBase(imagesGuids[currindex]), width: size.width, height: size.height})
});

The buttons adjust the current image index in the array which I need to apply the dimension calculation on. BUT: I don't want to have the same setDesiredDimensions function copied and pasted in all button click functions, but rather just access/evaluate it as a shortcut for a cleaner code.

I heard eval(); is dangerous and slow. Any ideas?

Eval is usually considered a bad idea - see http://stackoverflow.com/questions/86513/why-is-using-javascript-eval-function-a-bad-idea — kaj, Mar 03 '12 at 20:54
You can avoid the danger side of `eval` but not the slow-ness. — Shiplu Mokaddim, Mar 03 '12 at 21:10
It seems like you could just call the function again? Doesn't look like you even close to need eval? — Corbin, Mar 03 '12 at 21:12
Thanks everybody. Felix: Thank you, I just call the function, and I fixed my scopes to make it work, that was in fact my issue. Post the answer so I can approve it. — DominiqueBal, Mar 03 '12 at 21:43

score 2 · Accepted Answer · answered Mar 03 '12 at 21:58

If you have define setDesiredDimensions in a scope accessible by all event handlers, you can just call the function. That's what functions are for.

I think your problem is that the function is working with global variables instead of arguments passed to it. In you example, you are passing imagesOrigWidths[currindex] as argument but also access imagesOrigWidths[currindex] inside the function, which does not make sense.

Redefine it so that you can simply pass the arguments it needs, something like

function setDesiredDimensions(orig_width, orig_height, limit) {
    var width = Math.min(orig_width, limit);
    var height = Math.ceil((width / orig_height) * orig_height);

    // some more calculation code here...

    return {width:width,height:height};
}

JavaScript: eval a function inside other function

1 Answers1