相关疑难解决方法(0)

鉴于以下示例,为什么outerScopeVar在所有情况下都未定义？

var outerScopeVar;

var img = document.createElement('img');
img.onload = function() {
    outerScopeVar = this.width;
};
img.src = 'lolcat.png';
alert(outerScopeVar);

var outerScopeVar;
setTimeout(function() {
    outerScopeVar = 'Hello Asynchronous World!';
}, 0);
alert(outerScopeVar);

// Example using some jQuery
var outerScopeVar;
$.post('loldog', function(response) {
    outerScopeVar = response;
});
alert(outerScopeVar);

// Node.js example
var outerScopeVar;
fs.readFile('./catdog.html', function(err, data) {
    outerScopeVar = data;
});
console.log(outerScopeVar);

// with promises
var outerScopeVar;
myPromise.then(function (response) {
    outerScopeVar = response;
});
console.log(outerScopeVar);

// geolocation API
var outerScopeVar; …

除了jQuery版本之外,Deferred和Promise有什么区别？

我应该用什么来满足我的需求？我只想打电话给fooExecute().例如,我只需要fooStart()和fooEnd()切换html div状态.

//I'm using jQuery v2.0.0
function fooStart() { /* Start Notification */ }
function fooEnd() { /* End Notification */ }
function fooExecute() { /* Execute the scripts */ }

$('#button1').on('click', function() {
    var deferred1 = $.Deferred();
    var promise1 = $.Promise();

    deferred1.???

    promise1.???
});

可能重复:
Javascript中Deferred,Promise和Future之间有什么区别？

最近我一直在努力提高我的JavaScript应用程序的质量.

我采用的一种模式是使用单独的"数据上下文"对象来为我的应用程序加载数据(之前我在我的视图模型中直接执行此操作).

以下示例返回在客户端上初始化的数据:

var mockData = (function($, undefined) {

    var fruit = [
        "apple",
        "orange",
        "banana",
        "pear"
        ];

    var getFruit = function() {
        return fruit;
    };

    return {
        getFruit: getFruit
    }
})(jQuery);

在大多数情况下,我们将从服务器加载数据,因此我们无法立即返回响应.在我们的API中,我似乎有两种选择:

1. 使用回调
2. 回复承诺.

以前我总是使用回调方法:

var getFruit = function(onFruitReady) {
    onFruitReady(fruit);
};

// ...

var FruitModel = function(dataContext, $) {
    return {
        render: function() {
            dataContext.getFruit(function(fruit) {
                // do something with fruit
            });
        }
    };
};

但是,我可以看到如何最终回调地狱,特别是在构建复杂的JavaScript应用程序时.

然后我遇到了Promises的设计模式.我不是要求调用者提供回调,而是返回一个可以观察到的"承诺":

var getFruit = function() {
    return $.Deferred().resolve(fruit).promise(); …

你能解释一下下面的短语(取自Stack Overflow问题的答案,在Javascript中Deferred,Promise和Future之间有什么区别？)？

使用jQuery promises反对使用以前的jQuery回调有什么优点？

不是直接将回调传递给函数,而是使用promises可以导致紧密耦合的接口,而是可以分离对同步或异步代码的关注.

可能重复:
Javascript中Deferred,Promise和Future之间有什么区别？

有人能指出回调和承诺之间的区别是什么？什么时候应该使用诺言等？

还将赞赏有关如何创建和使用承诺的链接.

我对被抛出的不同术语感到困惑.根据我的理解,承诺可以是:

fulfilled
rejected
pending 
settled
resolved
defer

解决意味着解决了吗？还是意味着它实现了？什么是推迟的？

我真的很喜欢jQuery延迟/承诺模式或范例的想法,但有时候我很难将我老化的大脑包裹在更精细的点或具体的实现细节之外.

事实上,最近我发现deferred/promise模式/范例似乎早于jQuery,并且至少在其他JavaScript库/框架中:

• 延期的^github
• Q ^主页
• task.js ^主页
• when.js ^github
• wire.js ^{github,演示文稿}
• YUI ^{gallery -deferred模块}

我可能错过了一些,其中包含其他一些内容的东西,并在该列表中犯了其他错误...请编辑它以纠正它或发表评论.

"Q"是否发明了延迟/承诺概念？它是用其他JavaScript库或框架发明的吗？还是它完全早于JavaScript？

如果整个想法传统上是函数式编程的一部分,它首先在哪里完成,我在哪里可以阅读有关概念而不是这些各种不同的JavaScript实现？

或者功能性编程完全不是重点？概念是否与并发编程相关而不是与函数式编程相关？

我已经阅读了Promise/A +规范,但据我所知,还有Promise/A和Promise这样的东西.它们之间有什么区别？是承诺还是承诺/ A规格？如果是这样,有什么区别？很抱歉,如果这个问题很愚蠢,因为我是主要的后端开发人员.

提前致谢!

jQuery.when()的文档说这个函数需要延迟。但是，它稍后还说：

如果将单个参数传递给 jQuery.when() 并且它不是 Deferred 或 Promise ...

这似乎意味着它也可以采用 Promises。但是 Promises 不是 Deferreds——它们有一个 Deferred 方法的子集。我猜你可以说 Deferred 是 Promise，但 Promise 不是 Deferred。

问题：

1. $.when() 可以接受 Promises 或 Deferreds 吗？这似乎在我的测试中有效。
2. 文档中是否有错误？我认为应该说 $.when() 需要 Promises，而不仅仅是 Deferreds。

你能否向初学者解释"承诺","异步"和"回调"之间的区别.这些术语如何相互关联？这些是一回事吗？不同的东西？我什么时候使用哪个？

嗨,我有一个按钮,可以触发两个功能.有没有办法让updateDetails只在changeColor完成后运行？updateDetails当前正在使用旧颜色而不是更改的颜色来提取旧配置.

ng-click="changeColor(color.code); updateDetails()"

这是观点:

<div ng-controller="ColorsCtrl">
  <div ng-controller="HeaderCtrl">
    <div byo-header>
    </div>

    <div ng-repeat="color in colors" class="row">
      <div class="small-12 columns">
            <div ng-controller="ButtonsController">
                <div class="button-group">
              {{ isSelected(color.code) }}
                <button ng-click="changeColor(color.code); updateDetails()" type="radio" class="button" ng-model="selectedColor" btn-radio="color.code">{{color.name}}</button>
            </div>
            </div>  
      </div>
    </div>
    <br/>
    <br/>
    <div class="row">
        <div class="small-4 small-offset-4 columns">
        <!-- Proceed to packages if available -->
            <a ng-if="hasPackage" href="#/packages/{{modelCode}}" class="button">Packages</a>
        <!-- Proceed to options if packages not available -->
        <a ng-if="!hasPackage" href="#/options/{{modelCode}}" class="button">Options</a>
        </div>
    </div>    
  </div>
</div>

这是ColorsCtrl中的changeColor():

$scope.changeColor = function(newColorCode){
        //swap previous selected …

我有一个网页,可以将无限数量的项目提交回服务器进行处理.

我决定使用AJAX调用将这些项目以25个为一组提交给Web服务.所以我的循环看起来像这样:

// Submit elements
for (var i = 0; i < ids.length; i += 25) {

    var productIds = ids.slice(i, Math.min(i + 25, ids.length - 1));

    $.post('/Services/ImportProducts.asmx/ImportProducts', JSON.stringify({ importProductIds: productIds }))
    .done(function (result, statusText, jqxhr) {

        // TODO: Update progress

    })
    .always(function () {
        // TODO: Test for error handling here
    });
}

到目前为止,这似乎是对的.但是,当所有处理完成后,我想刷新页面.鉴于上面的代码,我没有看到在最后一次AJAX调用完成时执行任务的简单方法.

由于$.post()是异步的,因此该循环将在AJAX调用之前完成.由于AJAX调用可以以与提交时不同的顺序完成,因此我不能简单地测试我上次提交的调用何时完成.

我怎么知道这段代码什么时候完成？

如何让该list()方法等待数据加载到构造函数中，然后再将其承诺返回给调用者？

import fetch from 'node-fetch';

class Employees {
    constructor() {
        if (Employees._instance) {
            return Employees._instance
        }
        Employees._instance = this;

        this.employees = [];
        this.dataLoaded = false;

        this.url = 'https://raw.githubusercontent.com/graphql-compose/graphql-compose-examples/master/examples/northwind/data/json/employees.json';

        (async () => {
            const response = await fetch(this.url);
            this.employees = await response.json();
            this.dataLoaded = true;
            console.log(`work done: got ${this.employees.length} employees`);
        })();
    }

    list() {
        return new Promise((resolve) => {
            resolve(this.employees.map(m => `${m.firstName} ${m.lastName} (${m.id})`));
        });
    }

}

const employees = new Employees();

(async () => {
    console.log(await employees.list());
})();