延迟动态更新以从数据库获取正确的值

Question

我有这个 jQuery 代码，可以对照片进行评级，然后更新数据库中的评级。函数 updateRating 应该用新的评级更新显示，但有时却不会。我该如何确保显示正确的评级？

$("#rate").click(
                function(){
                    ratePhotoById( $("#image").attr( 'id' ) );
                    updateRating( $("#image").attr( 'id' ) );

                    return false;
                }
            );

---

function ratePhotoById( imageId ){
        $.post(
            "ImageRate.php",
            { ... },
            function(data) {
                // process
                // console.log(data);
            }
        );
    } 

PS：理想情况下，这应该通过某种回调模式来完成。这可能吗？

Answer 1

编辑：基于问题的更新...

将ratePhotoById更改为：

function ratePhotoById( imageId ){  
  $.post(             
    "ImageRate.php",             
    { ... },             
    function(data) {                 
        // process                 
        // console.log(data);             
        updateRating( $("#image").attr( 'id' ) );
  }); 
}

并从点击事件处理程序中删除对updateRating的调用

OLD：
我猜你正在使用ajax来更新评级（通过ratePhotoById函数）。

将调用移至 updateRating 函数，作为ratePhotoById ajax 调用中成功回调的一部分
像这样的东西：

function ratePhotoById(elID){
    $.ajax({
        .
        .
        .
        .
        success: function(data){
            updateRating( $("#image").attr( 'id' ) );           
        }
    });
}

Answer 2

您还可以返回 $.ajax 返回的延迟，这可以让您稍微解耦事物。

function ratePhotoById( imageId ){
    return $.post(
        "ImageRate.php",
        { ... },
        function(data) {
            // process
            // console.log(data);
        }
    );
}

然后你可以使用deferred的done(cb)方法。这将使用 AJAX 请求的结果调用回调函数，无论它已经返回还是仍将返回。

$("#rate").click(function(){
    ratePhotoById( $("#image").attr( 'id' ) ).done(function() {
        // excuted after ratePhotoById() has completed successfully.
        updateRating( $("#image").attr( 'id' ) );
    });
    return false;
});

Deferred 对象还有一些其他不错的方法，例如fail() 和pipe()。查看 Deferred 的文档以获取更多信息： http://api.jquery.com/category/延迟对象/