jQuery:如何在更新时返回函数外部的值?(返回语句不这样做)



来自JavaScript/jQuery初学者的问题:

我将实际问题放入代码的注释中,以使其非常清晰:

        $("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>

它没有改变,因为您在更改日期之前已经调用了console.log("test: " + timestamp);....因此,让我们看看您的代码实际上在做什么

$("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);
});

检查下面的代码,我将添加一个间隔以每 1 秒记录一次时间戳......然后,您将能够在选择后看到新更新的时间戳

这只是为了澄清

$("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);
    });

最新更新