jQuery: How to return a value outside a function upon update? (return statement doesn't do it)

Question

Question from a JavaScript/jQuery beginner:

I'm putting the actual questions into the comments of the code to make it crystal clear:

        $("document").ready(function() {
            var timestamp;
            $("#startDate").datepicker({
                // the following is updating var timestamp
                // every time the user selects a date via datepicker
                onSelect: function(e) { 
                    var dateAsObject = $(this).datepicker( "getDate" ); //the getDate method
                    timestamp = dateAsObject.getTime(); // timestamp of the date selected by user
                    console.log("user selected: " + timestamp);
                    return timestamp;
                }
            });
            // how do I get the value of timestamp here, 
            // outside the function every time the value of 
            // timestamp changes inside the function? 
            console.log("test: " + timestamp);
            // Why is the above line of code not updating/outputting anything 
            // when the value of timestamp changes inside the function
            // and how do I get it to work/update here, outside the function?
        });

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<form action="">
        <label for="startDate">Select a date:</label>
        <input type="text" id="startDate" name="startDate">
</form>

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Andreas, Oct 14 '17 at 10:27
@Andreas Thank you for that link, I was not aware that this problem is related to asynchronous calls (but I'm guessing it is). I'm currently studying the responses in that big thread and I'm almost certain that the responses/info there will help me improve my JavaScript understanding and skills. — WebDevBooster, Oct 14 '17 at 11:06

Amr Labib · Accepted Answer · 2017-10-14T10:50:02.627

1

Its not changing because you already called console.log("test: " + timestamp); before changing the date .... so lets see what your code is actually doing

$("document").ready(function() {
    var timestamp;
    //1- initialize date picker
    $("#startDate").datepicker({
        //2- add handler function only when select happens
        onSelect: function(e) {
            //4- the code below will be executed only when you select date
            var dateAsObject = $(this).datepicker("getDate"); //the getDate method
            timestamp = dateAsObject.getTime(); // timestamp of the date selected by user
            console.log("user selected: " + timestamp);
            return timestamp;
        }
    });
    //3- console log the value of timestamp.... this is still undefined because you still didn't select any date 
    //this line will not be called again after a data select
    console.log("test: " + timestamp);
});

Check the code below i will add an interval to log the timestamp every 1 second ... then you will be able to see the new updated timestamp after selection

this is just for clarification

$("document").ready(function() {
        var timestamp;
        //1- initialize date picker
        $("#startDate").datepicker({
            //2- add handler function only when select happens
            onSelect: function(e) {
                var dateAsObject = $(this).datepicker("getDate"); //the getDate method
                timestamp = dateAsObject.getTime(); // timestamp of the date selected by user
                console.log("user selected: " + timestamp);
                return timestamp;
            }
        });
        //3- now we set a timer to log timestamp every 1 second it will keep logging undefined until you select a date
        setInterval(function(){
                console.log("test: " + timestamp);
            } , 1000);
    });

edited Oct 14 '17 at 10:50

answered Oct 14 '17 at 10:37

Amr Labib

3,995
3
19
31

OK, but what's the magic trick to call console.log("test: " + timestamp); again after a data select? Is there something jQuery specific? How do I actually do it? (sorry for being such a noob) – WebDevBooster Oct 14 '17 at 10:40
i edited the code to log the ```timestamp``` every 1 second ... but the question is where do you want to use ```timestamp``` ? ... i think you are just trying to test that it got changed and it already did ... now where do you want to use it ? – Amr Labib Oct 14 '17 at 10:43
P.S. Just saw that you added interval to log the timestamp every 1 second. Is that the only way to get that updated value out? Or is this just the easiest method? – WebDevBooster Oct 14 '17 at 10:44
P.P.S. I want to use timestamp in another function. So, the value of timestamp would change the output of the other function. – WebDevBooster Oct 14 '17 at 10:45
timestamp is already updated in your code .... the timer is just to prove for you that it got changed after you select date .... yes if you used timestamp now in another function it should pick the updated one .... and you don't need the timer ```setInterval``` as i already mentioned its just for clarification – Amr Labib Oct 14 '17 at 10:47
@WebDevBooster Check the duplicate – Andreas Oct 14 '17 at 10:53
@Andreas this is a different problem because the question you mentioned as duplicate is an issue of ```asynchronous``` call concept ... which is not the case here .... the case here is that the ```console.log``` is executed before the date ```onSelect``` handler ... and the handler will be triggered by user action – Amr Labib Oct 14 '17 at 10:58
Which perfectly describes _asynchronous behavior_ – Andreas Oct 14 '17 at 11:21
I think you are right ... technically they are almost the same concept – Amr Labib Oct 14 '17 at 11:23

jQuery: How to return a value outside a function upon update? (return statement doesn't do it)

1 Answers1