javascript - 另一个函数发出请求后的 jQuery 回调

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 6 年前。

我一直不太擅长理解 JS 回调、promise 以及所有这些。现在我偶然发现了其中一种情况。

我有一个文本元素。单击后，它变为可编辑状态。当按 Enter 时，会使用输入值发出 AJAX 请求，然后(这是我的问题)应使用输入更新原始文本。

$('#text-element').click(function() {
    edit($(this), url, paramName);
});

function edit($element, url, paramName) {
    // show the input, set up some UI events...

    $input.keypress(function(key) {
        // check if it is the correct key to submit the data
        if (submit) {
            var data = {};
            data[paramName] = $input.val();
            $.ajax({
                url: url,
                method: 'post',
                data: data,
                success: function(response) {
                    // ???
                }
            });
        }
    });
}

你可以说:简单，只需从响应中获取数据并用更新后的文本替换原始文本即可。我不能/不想这样做，因为我想要 edit函数保持通用，以便它可以在其他场景中使用，正如您可能已经通过使用不同的参数猜到的那样。

此外，在 edit 的背景下函数我们并不真正知道 response 的形状对象，所以我们在那个阶段无法处理它。

应该处理响应的正确位置是我们单击文本元素的部分，在这里我们确实知道上下文，并且我们知道response的预期组成。 .

所以本质上，我想返回(或者在处理 promise 、回调、异步操作时所做的任何事情)来自ajax成功函数的响应，在点击中获取该响应handler 函数并进行相应处理:

$('#text-element').click(function() {
    edit($(this), url, paramName); // <--- this should "return" the response
    var response = ...; // how do I fetch this response from the edit function
    $(this).html(response.content); // the response we expect in this case would be a JSON response with a key "content"
});

我希望我能让自己明白。如果我不这样做，请告诉我，以便我可以澄清问题。

Answer 1

简单地制作一个回调函数:

$('#text-element').click(function() {
    edit($(this), url, paramName,function(response){
        this.html(response.content);
    }.bind($(this)));//bind to keep the #text-element as this
});

function edit($element, url, paramName,callback) {
// show the input, set up some UI events...

$input.keypress(function(key) {
    // check if it is the correct key to submit the data
    if (submit) {
        var data = {};
        data[paramName] = $input.val();
        $.ajax({
            url: url,
            method: 'post',
            data: data,
            success: function(response) {
                callback(response);//whats your problem with callbacks? they are so easy...
            }
        });
    }
});
}

顺便说一句，如果用户单击两次，则会注册两个按键处理程序，使整个代码变得一团糟。所以你可以通过某种方式阻止这种情况......