async not working as expected?

Question

I have a polymer element which is grabbing data from a spreadsheet through "polymer-jsonp". Once the data has arrived, I update the content of my element and want to get its displayed size.

I expect the async to be called when images and content has been fully rendered. (http://www.polymer-project.org/docs/polymer/polymer.html#asyncmethod)

Calling refresh as below appears to return the size of my divs without the inner images. ... ...

researchChanged: function() {
        if(this.research){
          this.$.title.innerHTML = this.research.feed.entry[0].gsx$title.$t;

          // call refresh
          this.async(this.refresh);

        }
      }

Calling refresh with a delay appears to return the expected size.

this.async(function() {
                this.refresh();
              }, null, 10);

Is it the expected behavior? Can we minimize this async delay somehow?

Thanks

Scott Miles Scott Miles · Accepted Answer · 2014-03-20T05:57:07

All async does is wait until JavaScript has yielded the thread. There is no guarantee that any particular other asynchronous task is done.

For example, whenever you create an <img> element, when that picture is fully loaded is indeterminate (because the browser may have to go the network to load the pixels). You have to listen to the element's onload event to know for sure.

Now, sometimes we talk about microtasks. The async method and microtasks go together. An easy way to think about a microtask is as everything that will get done before your async action happens.

For example, if you call async you can be assured that all data-propagations (due to bindings and observers) will occur before your async method executes. Mutation observers and pending events are also all resolved in a single microtask.

async not working as expected?

2 Answers