CODEWITHSUNDEEP
jquerypromisees6-promise
Sagi_Avinash_Varma
Sagi_Avinash_Varma

Reputation: 1509

es6-promise.js polyfill(mentioned in html5rocks,MDN) not working

I have a JS code using promises. It works as it should in ES6 promises supported browsers

As mentioned in MDN older versions than chrome32, firefox26, any version of IE, promises are not supported

I have applied the polyfill(suggested by MDN, HTML5Rocks) mentioned here https://github.com/jakearchibald/es6-promise

Polyfill File: "http://es6-promises.s3.amazonaws.com/es6-promise-2.0.0.min.js"

I can see the polyfill script is executing because the compiler reaches the breakpoint

but i get an error Promise not defined, when i use

var promise = new Promise();

Here is my complete html code of the webpage. Its a simple example, you can test it with browserstack in older browsers.

I am sure the mistake is on my side because thats a polyfill suggested everywhere.

Code Live: 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>

Upvotes: 0

Views: 3621

Answers (1)

Benjamin Gruenbaum
Benjamin Gruenbaum

Reputation: 276296

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();
}

Upvotes: 3

Related Questions