我有一个使用promises的JS代码。它在ES6承诺支持的浏览器中应该正常工作
正如MDN旧版本中提到的，比chrome32，firefox26，任何版本的IE，不支持承诺
我已应用此处提到的polyfill（由MDN，HTML5Rocks建议）https://github.com/jakearchibald/es6-promise
Polyfill文件：＆＃34; http://es6-promises.s3.amazonaws.com/es6-promise-2.0.0.min.js＆＃34;
我可以看到polyfill脚本正在执行，因为编译器到达了断点
但是当我使用
时，我收到错误Promise not defined
var promise = new Promise();
这是我完整的网页html代码。这是一个简单的例子，您可以在旧浏览器中使用browserstack进行测试。
我确信这个错误就在我身边，因为那是一个多元化建议。
现场代码：http://sagiavinash.com/learn/es6promise/2/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ES6-Promise chaining</title>
<style type="text/css">
div{ width:100px; height:100px; opacity:0; }
.red{ background:red; }
.green{ background:green; }
.blue{ background:blue; }
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//es6-promises.s3.amazonaws.com/es6-promise-2.0.0.min.js"></script>
<script type="text/javascript">
function appear(div){
var promise = new Promise(function(resolve,reject){
console.log(div);
var i = 0;
var loop = setInterval(function(){
if (i == 10){
clearInterval(loop);
console.log("animation end");
resolve();
}
div.css({"opacity": (i/10)});
i+=1;
},100);
});
return promise;
}
$(document).ready(function(){
appear($("div.red").eq(0)).then(function(){
return appear($("div.green").eq(0));
}).then(function(){
return appear($("div.blue").eq(0));
});
});
</script>
</body>
</html>
答案 0 :(得分：3)
实际的polyfill问题：
var Promise = Promise || ES6Promise.Promise; // do this to access Promise directly
应该修理它。
您已经在使用jQuery，因此您可以编写使用jQuery设备或本机设备编写的代码。
首先 - 您可以通过两种方式进行动画制作：
.animate。.animate可以为您执行此操作，您可以使用它更改不透明度。$("div.red:eq(0)").fadeTo(1000, 0.5);
.toAppear {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.toHide { 不透明度：0; }
然后您使用.classList或jQuery的.addClass添加/删除将为您执行动画的toAppear和toHide类
你可以使用更丰富但也可以使用像Bluebird一样的ES6投诉API，或者你可以使用jQuery的延迟。他们已经发布了jQuery：
function appear(div){
var promise = new $.Deferred(function(d){
console.log(div);
var i = 0;
var loop = setInterval(function(){
if (i >= 1){
clearInterval(loop);
console.log("animation end");
d.resolve();
}
div.css({"opacity": i});
i+=0.1;
},100);
});
return promise.promise();
}