Question

我从来都不擅长理解JS回调，承诺和所有这些。现在我偶然发现了其中一种情况。

我有一个文本元素。单击时，它可以编辑。按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的预期组成。

基本上，我希望返回（或者你在处理promises，回调，异步操作时做的任何事情......）来自ajax成功函数的响应，在点击中获取该响应处理程序功能并相应地处理它：

$('#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...
            }
        });
    }
});
}

顺便说一句，如果用户点击两次，则会注册两个按键处理程序，使整个代码变得混乱。所以你可以在某种程度上阻止它......

另一个函数

1 个答案: