How to define a function inside a function and call it from the outside?

Question

I began to study JavaScript, and this problem blocked me. Look at this:

<script>
    $(function () {
        // Start the connection.
        $.connection.hub.start().done(function () {
            // How to define some functions here to call from below script?
        });
    });
</script>

<script type="text/javascript" gwd-events="handlers">
    window.gwd = window.gwd || {};
    gwd.boardSelectionChanged = function(event) {
        var carousel = document.getElementById("mediaCarousel");
        var index = carousel.currentIndex;
        // how to pass this index to a function above?
};
</script>

in the first script I'm trying to connect to the server. in the second script, the user can select an image.

I want to pass indexfrom the second script to a function inside the first to send it to the server.

How to define a function in the first and what to call it? thank.

Answer 1

You can do something like this:

<script>
    var newFunction = undefined;

    $(function () {
        // Start the connection.
        $.connection.hub.start().done(function () {
            // How to define some functions here to call from below script?
            newFunction = function(index){
                // Your function processing.
            }
        });
    });
</script>

<script type="text/javascript" gwd-events="handlers">
    window.gwd = window.gwd || {};
    gwd.boardSelectionChanged = function(event) {
        var carousel = document.getElementById("mediaCarousel");
        var index = carousel.currentIndex;
        // how to pass this index to a function above?
        if(newFunction) newFunction(index);
};
</script>

Answer 2

Consider the example below. Define your function in the callback function connection.done, then call the function when the selection has changed.

$(function() {
  // Start the connection.
  $(window).load(function() {

    // We'll define our function here
    postConnectFunction = function(index) {
      console.log('You selected', index)
    }

  });
});

// When something is changed we'll call the function above
$('select').on('change', function(event) {
  if (postConnectFunction) {
    postConnectFunction(event.target.value);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select>

Run codeHide result

Answer 3

, :

var functionReference = undefined;
$(function() {
    $.connection.hub.start().done(function() {
        functionReference = function () { /* ... */ };
    });
});

// You could then check if the function is set later, and invoke it:
if (functionReference) {
    functionReference(index);
}

, , - , :

<script>
$(function () {
    // Obtain a reference to the carousel element:
    var carousel = document.getElementById("mediaCarousel");

    // Start the connection.
    $.connection.hub.start().done(function () {
        window.gwd.boardSelectionChanged = function (event) {
            // Call your handler function
            handleBoardSelectionChange(carousel.currentIndex);
        };
    });

    // We are separating and naming this function so that the logic
    // above remains concise and readable, if we kept all of the
    // functions of this nature anonymous it would have been harder to
    // follow the code due to length and scope depth.
    function handleBoardSelectionChange(index) {
        // Do your work here
    }
});
</script>

<script type="text/javascript" gwd-events="handlers">
window.gwd = window.gwd || {};
gwd.boardSelectionChanged = function(event) {
    // Indicate to the user that we are not ready yet.
    // (Do whatever is sensible here, maybe doing nothing is better?)
    alert('Not connected yet, please wait...');
};
</script>

Answer 4

<script>
    var innerfunc;
    $(function () {
        // Start the connection.
        $.connection.hub.start().done(function () {
            // How to define some functions here to call from below script?
              innerfunc = function(index) {
                  console.log('here is my index: ' + index);
              };

        });
    });
</script>

<script type="text/javascript" gwd-events="handlers">
    window.gwd = window.gwd || {};
    gwd.boardSelectionChanged = function(event) {
        var carousel = document.getElementById("mediaCarousel");
        var index = carousel.currentIndex;
        // how to pass this index to a function above?
         if( innerfunc ) innerfunc(index);
};
</script>

Make sure that the top code is executed first before the bottom. If the racing condition persists, you can check

if (internalfunc) innerfunc (index)

Hope this helps.