回调函数值[重复]答案

【问题标题】：Calling back a functions value [duplicate]回调函数值[重复]
【发布时间】：2012-08-26 11:04:14
【问题描述】：

可能重复：
Function triggering early
calling a functions value

我需要一些帮助。

我这辈子都想不通。我已经把我的头缠在它周围，但无济于事。

我想设置两个功能。

功能：select_date() 与用户交互以从 jQuery 日期选择器中选择日期。如果对话框关闭，则返回 null。
然后是第二个函数：test()，用于检查日期是否为picked/selected。

这是我的两难选择，当函数test() 被执行时，会弹出一个警告框并显示"undefined"，这意味着我永远无法选择一个日期，它总是"undefined"

我看不出我在这里做错了什么，一切对我来说似乎都是合乎逻辑的。

<!DOCTYPE html>
<html>
<head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script>

    <script type="text/javascript">

    function select_date() {
    var sdate

        $('#dd').dialog({
            autoOpen: true,
            modal: true,
            overlay: {
                opacity: 0.5,
                background: 'black'
            },
            title: "title",
            height: 265,
            width: 235,
            draggable: false,
            resizable: false
        });
        $('#d1').datepicker({
            onSelect: function () {
                $("#dd").dialog("close");
            }
        });
        return sdate
    }

    function test() {
    var x = select_date()

    alert(x)

    }

    </script>
    <style type="text/css">
    #d1 {font-size:64%;}
    </style>
</head>
<body>
<div id="dd">
<div id="d1">
</div>
</div>
<a href="javascript:test()">test</a>
</body>
</html>

【问题讨论】：

那么你在哪里设置sdate 的值，那么它不会自己设置？？？
sdate 在哪里设置？
逻辑如何，在你的select_date()中，你声明了sdate，做一些不相关的操作，返回sdate，显然是未定义的。

标签： javascript jquery html jquery-ui javascript-framework

【解决方案1】：

这就是 JavaScript 的工作方式...select_date() 立即返回，因为 .dialog() 和 .datepicker() 是异步方法。 return sdate 在任何事情发生之前就被调用。正确的做法是使用来自onSelect()的回调方法

function select_date(callback) {
  $('#dd').dialog({
        autoOpen: true,
        modal: true,
        overlay: {
            opacity: 0.5,
            background: 'black'
        },
        title: "title",
        height: 265,
        width: 235,
        draggable: false,
        resizable: false
    });
    $('#d1').datepicker({
        onSelect: function () {
            $("#dd").dialog("close");
            callback($(this).datepicker('getDate'));
        }
    });
}

function test() {
  select_date(function(selected_date) { alert(selected_date); });
}

唯一的问题是如果没有选择日期并且对话框关闭，回调将不会被调用。您可以在对话框中为此添加一个事件侦听器，并使用 null/undefined 值调用 callback，但这取决于您。

【讨论】：

已更新，使用正确的方法获取日期。谢谢。尽管this 在该上下文中是输入字段，但请参阅文档jqueryui.com/demos/datepicker/#event-onSelect
哇！我对此非常感兴趣和印象深刻。非常感谢您提供代码和 Brendan 的出色帮助。干杯，杰