有一个函数来等待 AJAX 调用，没有同步 AJAX(SJAX）

我正在网页上创建一个动态待办事项列表。在该页面上，您有一个用于注册待办事项的表格和一个显示所有已注册待办事项的表格。这个想法是，您在表单中注册您想要完成的事情，点击提交按钮，然后使用最新注册的待办事项自动更新待办事项列表表。我的脚本管理所有这些，除了自动更新最新注册的待办事项。这是我的代码：

        $(document).ready( function() {
            $('#todo_registration input[type="submit"]').click(function(evt){
                evt.preventDefault();
                var todo = $('#todo_registration input[name="daily_todo"]').val();
                $('#todo_registration input[name="daily_todo"]').val(null);
                $.when( registerTodo(todo) )
                    .then (
                        updateTodoDisplay()
                    );
            });
        });
        function updateTodoDisplay() {
            $.post("./daily_todo_display.php", null, replaceTbodyHTML);
        }
        function replaceTbodyHTML(data) {
            $('#todo_display_table tbody').html(data);
        }
        function registerTodo(todo) {
            var parameters = {
                daily_todo: todo,
                registration_button: 'clicked'
            };
            $.post("./daily_todo_registration.php", parameters); //, printRegistrationStatus);
        }

我已经检查了脚本是否成功地在数据库中注册了待办事项。获取更新的待办事项列表的 php 脚本也可以工作。我认为，我的问题是函数 updateTodoDisplay(( 在运行之前不会等待 registerTodo(( 中的 AJAX 调用成功完成。但我认为我使用 #.when(( 应该让 updateTodoDisplay(( 等待。

我知道使 AJAX 调用同步可能会解决我的问题，但在我看来这是一个糟糕的解决方案。我只希望这个也是唯一的函数等待 AJAX 调用完成。因此，我希望网页的其余部分在进行这些调用时正常运行。

有人知道我的问题的解决方案吗？ 谢谢。