-3

I've got a library (Hubspot Odometer) which I am using in a web application I am developing and it works fine to create and run Odometer style widgets on a page.

The trouble is that they are part of a dashboard interface which has panes that are loaded via AJAX. The initial view is not loaded via AJAX so the JavaScript executes fine and the odometers render correctly.

When I load a new pane with odometers however they are not rendered correctly nor do they act as they should. The reason for this is that the odometer library runs as one big IIFE.

What I am wondering is can I re-invoke the IIFE manually after I load content via AJAX so that the odometers are rendered and bound to correctly?

I am also using jQuery if that offers me any additional options.

Daniel Waghorn
  • 2,997
  • 2
  • 20
  • 33

3 Answers3

4

Try this:

var funcName = (function funcName() {
  // rest of the code
  return funcName;
}());

Also see this jsbin.

Michał Perłakowski
  • 88,409
  • 26
  • 156
  • 177
2

The whole idea of the IIFE is that its an anonymous function that is immediately executed. So by definition, no there is no way to re-execute it.

With that said however, you can store the function expression to a global variable, and execute it. For example

window.my_iife = (function() { /* stuff */ });
window.my_iife();

Notice the slight difference in syntax compared to the traditional IIFE: ((function() {})());

By storing the function in window, you are able to access it later from either the developer console or anywhere else in your code. If you simply store it in a var, or declare it as function my_iife() { /* ... */ } somewhere you risk that var or function declaration itself being wrapped in an IIFE and thus being inaccessible. As an example, that scenario could occur if the file you declared your var/function in is part of a Sprockets manifest (such as application.js in Rails).

Ilya O.
  • 1,500
  • 13
  • 19
  • 2
    What's the point of the parentheses in line 1? And what's the advantage of your approach over `function my_iffe() { } my_iffe();`? – a better oliver Aug 26 '15 at 12:19
  • Mostly a matter of personal style. When using my method you are guaranteed to be able to reinvoke the function from the developer console instead of it potentially getting lost in some other closure. OP did mention he wants to "manually" invoke it. – Ilya O. Aug 26 '15 at 12:22
  • 1
    The enclosing brackets do absolutely nothing, it simply assigns a function created by a function expression. – RobG Aug 26 '15 at 13:02
  • Like I said before, it avoids the problem of the named function declaration potentially getting stuck inside another closure and being inaccessible from the developer console or otherwise manually invokable. For instance, if his function is part of a Sprockets chain in Rails there is the possibility of the declaration itself being wrapped in an IIFE, and the OPs problem would come full circle. – Ilya O. Aug 26 '15 at 15:18
  • @DavidS. You seriously want to tell me that `window.my_iife =` does not add something to the global scope? There is no such thing as a namespace in JavaScript < 2015 and no one stated that the solution is not correct. – a better oliver Aug 26 '15 at 16:59
  • 1
    Sorry, I missed the "potentially getting lost in some other closure" part the first time. The intention of my question was not to enlighten me but to encourage you to add that information to your answer. – a better oliver Aug 26 '15 at 17:02
  • That is certainly a good point. Also I have a set of parens missing in my solution so there's a good excuse to update the answer :) – Ilya O. Aug 26 '15 at 18:03
0

var funcName = null; 
(funcName = function funcName() {
  // rest of the code
  return funcName;
}());

funcName();

This is what worked for me

jorence jovin
  • 191
  • 1
  • 2
  • 7