0

promises を使用した JS コードがあります。ES6 ではサポートされているブラウザーが約束されているため、正常に動作します。

MDN で述べたように、chrome32、firefox26、IE のすべてのバージョンよりも古いバージョンでは、promise はサポートされていません

ここで言及されているポリフィル（MDN、HTML5Rocksによって推奨）を適用しましたhttps://github.com/jakearchibald/es6-promise

ポリフィル ファイル: " http://es6-promises.s3.amazonaws.com/es6-promise-2.0.0.min.js "

コンパイラがブレークポイントに到達したため、ポリフィル スクリプトが実行されていることがわかります

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>
4

1 に答える 1

3

実際のポリフィルの問題:

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

それを修正する必要があります。

すでに jQuery を使用しているため、jQuery の機能またはネイティブの機能を使用して記述しているコードを記述できます。

まず、アニメーションは次の 2 つの方法で実行できます。

  • jQuery の.animate.
  • CSS アニメーションの使用。

これを行うjQueryを使用する.animateと、不透明度を変更できます。

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

CSS アニメーションを使用する

.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を追加/削除します。toAppeartoHide

約束に関しては

Bluebird promises のような、よりリッチな ES6 準拠 API を使用することも、jQuery の deferreds を使用することもできます。それらはすでに 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 に答える