Javascript 如何以及何时将jQuery回调重写为承诺? 我考虑使用承诺将现有回调的代码改写成代码。然而,我不确定这是否有意义,以及如何开始。下面的代码片段是该代码中的一个基本独立的示例: function addTooltip($element,serverEndpoint,data){ "严格使用",; 常数延迟=300; 常量工具提示\父类='hasTooltip'; 让超时引用; $element.hover(函数hoverStart(){ if($element.hasClass(工具提示\父类)){ 返回; } timeOutReference=setTimeout(函数getToolTip(){ const$span=jQuery(“”); $span.html(jQuery(“”)); $element.append($span); $element.addClass(工具提示\父类); get(serverEndpoint,data).done(函数注入工具提示(响应){ $span.html(response.data); }).失败(handleFailedAjax); },延误); },函数hoverEnd(){ clearTimeout(timeOutReference); }); };
预期功能:当用户将鼠标悬停在Javascript 如何以及何时将jQuery回调重写为承诺? 我考虑使用承诺将现有回调的代码改写成代码。然而,我不确定这是否有意义,以及如何开始。下面的代码片段是该代码中的一个基本独立的示例: function addTooltip($element,serverEndpoint,data){ "严格使用",; 常数延迟=300; 常量工具提示\父类='hasTooltip'; 让超时引用; $element.hover(函数hoverStart(){ if($element.hasClass(工具提示\父类)){ 返回; } timeOutReference=setTimeout(函数getToolTip(){ const$span=jQuery(“”); $span.html(jQuery(“”)); $element.append($span); $element.addClass(工具提示\父类); get(serverEndpoint,data).done(函数注入工具提示(响应){ $span.html(response.data); }).失败(handleFailedAjax); },延误); },函数hoverEnd(){ clearTimeout(timeOutReference); }); };,javascript,jquery,promise,Javascript,Jquery,Promise,预期功能:当用户将鼠标悬停在$element上300毫秒时,将从服务器请求工具提示内容并将其附加到$element 用承诺重写代码有意义吗?我该怎么做 (jQuery是由框架(dokuwiki)提供的,因此我们不妨使用它。) 先前的研究: 关于这个话题的其他问题让我不确定这是否是一个明智的想法以及如何做到这一点 详细阐述我的上述评论。下面是一个示例,说明承诺如何使依赖回调代码(可以说)更具可读性(基本上,它破坏了回调中回调的嵌套): 同样,对于您发布的代码片段,我几乎看不出它的价值(除非您将
$element
上300毫秒时,将从服务器请求工具提示内容并将其附加到$element
用承诺重写代码有意义吗?我该怎么做
(jQuery是由框架(dokuwiki)提供的,因此我们不妨使用它。)
先前的研究:
- 关于这个话题的其他问题让我不确定这是否是一个明智的想法以及如何做到这一点
- 详细阐述我的上述评论。下面是一个示例,说明承诺如何使依赖回调代码(可以说)更具可读性(基本上,它破坏了回调中回调的嵌套):
同样,对于您发布的代码片段,我几乎看不出它的价值(除非您将其作为练习)
具有回调功能
function someAsyncMethod(callback) {
$.get({...})
.then(callback);
}
function anotherAsyncMethod(callback) {
$.get({...})
.then(callback);
}
someAsyncMethod(function() {
anotherAsyncMethod(function yourFunction() {
//do something
});
});
承诺:
function someAsyncMethod() {
return $.get({...});
}
function anotherAsycnMethod() {
return $.get({...});
}
someAsyncMethod()
.then(anotherAsyncMethod)
.then(function yourFunction() {
//do something
})
请详细说明我的上述评论。下面是一个示例,说明承诺如何使依赖回调代码(可以说)更具可读性(基本上,它破坏了回调中回调的嵌套): 同样,对于您发布的代码片段,我几乎看不出它的价值(除非您将其作为练习) 具有回调功能
function someAsyncMethod(callback) {
$.get({...})
.then(callback);
}
function anotherAsyncMethod(callback) {
$.get({...})
.then(callback);
}
someAsyncMethod(function() {
anotherAsyncMethod(function yourFunction() {
//do something
});
});
承诺:
function someAsyncMethod() {
return $.get({...});
}
function anotherAsycnMethod() {
return $.get({...});
}
someAsyncMethod()
.then(anotherAsyncMethod)
.then(function yourFunction() {
//do something
})
首先,您需要将
setTimeout
包装成一个承诺。只需创建一个函数,该函数接受一个超时并返回一个在该超时后解析的承诺
接下来,由于jQuery.get
已经返回了一个承诺,您只需要将其放入承诺解析处理程序中并返回其承诺。这样,下一个链接的,然后会听那个承诺,而不是计时器的承诺
它看起来像:
function timer(n){
return Promise(function(resolve){
setTimeout(resolve, n);
});
}
timer(DELAY).then(function(){
return jQuery.get(...)
}).then(function(response){
// jQuery.get promise resolved
}).catch(function(error){
// something failed somewhere
});
至于你的问题
用承诺重写代码有意义吗?我该怎么做
那要看你了。我发现基于promise的代码更具可读性,但正确编写需要时间,特别是如果您打算编写纯回调并处理多个异步操作的话。如果API以这种方式编写更简单,我通常会先编写代码回调,然后再进行重构以提高可读性。首先,您需要将setTimeout
包装成承诺。只需创建一个函数,该函数接受一个超时并返回一个在该超时后解析的承诺
接下来,由于jQuery.get
已经返回了一个承诺,您只需要将其放入承诺解析处理程序中并返回其承诺。这样,下一个链接的,然后会听那个承诺,而不是计时器的承诺
它看起来像:
function timer(n){
return Promise(function(resolve){
setTimeout(resolve, n);
});
}
timer(DELAY).then(function(){
return jQuery.get(...)
}).then(function(response){
// jQuery.get promise resolved
}).catch(function(error){
// something failed somewhere
});
至于你的问题
用承诺重写代码有意义吗?我该怎么做
那要看你了。我发现基于promise的代码更具可读性,但正确编写需要时间,特别是如果您打算编写纯回调并处理多个异步操作的话。如果API以这种方式编写比较简单,我通常会先编写代码回调,然后再进行重构以提高可读性。只有在回调中包含回调(或者将来可能需要此功能)时,才值得这样做。如果它只是一个简单的,完成后,执行X
,其他任何事情都不取决于它完成的时间(就像您发布的代码片段一样),那么它真的不重要,也不值得重写。.done
和fail
都是承诺,因为jQuery.get
返回一个promise如果你在回调中有回调(或者你将来可能想要这个功能),那么把它变成jQuery pluginIt才更有意义。如果它只是一个简单的,完成后,执行X
,其他任何事情都不取决于它完成的时间(就像您发布的代码片段一样),那么它真的不重要,也不值得重新编写。.done
和.fail
都是承诺,因为jQuery.get
返回一个承诺将其转换为jQuery插件会更有意义