0

我有一个使用承诺的 JS 代码。它在 ES6 承诺支持的浏览器中正常工作

如 MDN 中提到的，比 chrome32、firefox26、任何版本的 IE、promise 都不支持的旧版本

我已经应用了这里提到的 polyfill（由 MDN、HTML5Rocks 建议）https://github.com/jakearchibald/es6-promise

Polyfill 文件：“ http://es6-promises.s3.amazonaws.com/es6-promise-2.0.0.min.js ”

我可以看到 polyfill 脚本正在执行，因为编译器到达断点

但我得到一个错误Promise not defined，当我使用

var promise = new Promise();

这是我完整的网页html代码。这是一个简单的示例，您可以在旧浏览器中使用 browserstack 对其进行测试。

我确信错误在我这边，因为到处都建议使用 polyfill。

代码直播：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>
4

1 回答 1

3

The actual polyfill issue:

var Promise = Promise || ES6Promise.Promise; // do this to access Promise directly

Should fix it.

You're already using jQuery so you can write the code you're writing using jQuery's facilities or native ones.

First of all - you can do the animation in two ways:

  • Using jQuery's .animate.
  • Using CSS animations.

Use jQuery's .animate which would do this for you, you can change the opacity with it.

$("div.red:eq(0)").fadeTo(1000, 0.5);

Use CSS animations

.toAppear {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
 }

.toHide { opacity: 0; }

Then you'd use .classList or jQuery's .addClass to add/remove the toAppear and toHide classes which would perform the animation for you.

As for promises

You can use a more rich but also ES6 complaint API like Bluebird promises, or alternatively you can use jQuery's deferreds. They already ship with 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();
}
于 2014-11-12T08:12:38.267 回答