-2

可能重复：
函数触发早期
调用函数值

我需要一些帮助。

对于我的一生，我无法弄清楚这一点。我已经把我的头缠在它周围，但无济于事。

我想设置两个功能。

  1. 功能：select_date()与用户交互以从 jQuery 日期选择器中选择一个日期。如果对话框关闭，则返回 null。

  2. 然后是第二个功能：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>
4

1 回答 1

6

这就是 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); });
}

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

于 2012-08-31T15:43:05.480 回答