Return desired value within a function

Question

When trying to return the value of $("#datepicker-range").val() at the beginning of the code, console gives me a value emptiness. Soon, I was suggested to make a Sniffer page because the reason the field is not capturing the field date would be due to an issue in the order of operations in the code reading.

$(function(){
    startSelectors();

    var datepickerVerify = setInterval(function(){
        if($("#datepicker-range").val()){
            clearInterval(datepickerVerify);
            var vl = $("#datepicker-range").val();
            console.log('value returned: '+vl);
        }
        return vl;
    }, 50);

    //verificando o valor da variavel
    console.log('datepicker=> '+datepickerVerify);
});


function startSelectors(){
    $("#datepicker-range").val('2017-03-01 até 2017-08-02');
};

And just below follows how the console is returning my code (I point out that the field is working perfectly and features that same date on the front end)

Instead of returning the date in the middle log, as it was returned inside the if, he returns me a true (number 1). How can I set the variable value datepickerVerify instead of true, return me to date?

Answer 1

Hello,

Separating the contents of the setInterval function into a separate routine, the code worked perfectly. I commented the clearInterval routine because her code was not in the example. Follow the code:

 $(document).ready(function(){
        startSelectors();

        var datepickerVerify = setInterval();

        //verificando o valor da variavel
        console.log('datepicker=> '+datepickerVerify);
    });

function setInterval(){
            if($("#datepicker-range").val()){
                //clearInterval(datepickerVerify);
                var vl = $("#datepicker-range").val();
                console.log('value returned: '+vl);
            }
            return vl;
};

function startSelectors(){
    $("#datepicker-range").val('2017-03-01 até 2017-08-02');
};

Answer 2

In this case, this behavior is due to the fact that you are using setInterval, which by its feature, starts a processing in parallel with the execution of the main code.

The interpreter’s behavior was this: 1. Called and executed startSelectors function 2. Created a new instance to execute the function passed in setInterval after 50 milliseconds 3. Printed the console.log

But when it runs step 2, it does not wait for the 50-millisecond time count to proceed with the execution, it moves on to the end and in parallel runs setInterval after the time set.

This is visible even in the console, which first prints the console.log from outside of setInterval and then print the console.log from inside setInterval, because it was executed just after that.

To solve this, analyze if you really need this setInterval, because removing it you return to a line of execution. If really necessary, you will have to proceed with the logic inside the setInterval or with a callback function call, as in the example below:

$(function(){
    startSelectors();

    setInterval(function(){
        if($("#datepicker-range").val()){
            clearInterval(datepickerVerify);
            var vl = $("#datepicker-range").val();
            console.log('value returned: '+vl);
        }
        continuacao(vl);
        //return vl;
    }, 50);

    //verificando o valor da variavel
    function continuacao(datepickerVerify) {
      console.log('datepicker=> '+datepickerVerify);
    }
});


function startSelectors(){
    $("#datepicker-range").val('2017-03-01 até 2017-08-02');
};