- Polymer WebComponent library provides async() method to handle asynchronous behavior .
- It is similar to Window.setTimeout() method with current context(this) attached to it.
- In this Demo,”We will see the use of async() method to build a clock“.
- Below code has the definition for our ts-clock component in index.html.
<!doctype html>
<html>
<head>
<title>Polymer Async Method Demo: Custom Clock</title>
<script src="components/platform/platform.js"></script>
<script src="components/polymer/polymer.js"></script>
</head>
<body>
<ts-clock></ts-clock>
<polymer-element name=”ts-clock” attributes=”counter”>
<template bind=”{{clock}}”>
<style>
.clock{
display: inline-flex;
justify-content: space-around;
background: floralwhite;
font-size: 2rem;
font-family: serif;
}
.clock .hour,.clock .minute,.clock .second{
color: white;
padding: 1.5rem;
text-shadow: 0px 2px black;
box-shadow: 0px 47px 98px black inset;
}
</style>
<div class=”clock”>
<div class=”hour”>{{ clock.hour }}</div>
<div class=”minute”>{{ clock.minute }}</div>
<div class=”second”>{{ clock.second }}</div>
</div>
</template>
<script>
Polymer({
ready:function(){
this.updateClock()
},
updateClock: function(){
var date = new Date();
this.clock ={
hour : date.getHours(),
minute : date.getMinutes(),
second : date.getSeconds()
};
this.async(this.updateClock, null, 1000);
}
});
</script>
</polymer-element>
</body>
</html>
- Below screenshot shows the output of the above code as a clock.
- Below screenshot shows the Chrome developer toolbar markup inspection.
- Find the JSBIN link below.
