javascript - Make Knockout observable apply instantly? -
i have section of page bound knockout viewmodel. when click link loads data , displays little farther down. want display little loading img while goes out , loads data hide when complete. have following code (stripped down show important parts). ajax call not async, set false other code else using cannot change it. problem "self.loading(false)" doesn't fired until ajax call complete, doesnt appear show @ all. if switch ajax call async works intended. wondering why ajax call blocking observables change since called before it, shouldn't fire immediately. there way force trigger immediately.
html:
<a data-bind="click: getinfo" href="javascript:;"> <img data-bind="visible: loading" src="myimg.jpg" alt="loading" /> </a>
ko:
self.loading = ko.observable(false); self.getinfo = function () { self.loading(true); ajaxcall().done(function (data){ self.loading(false); } };
the observable , dom being updated immediately, can't see because browser doesn't around drawing screen. request blocking redraw because... it's non-async. exact reason should not make non-async requests.
as workaround try force event loop spin once using settimeout
0 timeout run horrible sync request after observable change, in seriousness, fix request async. browsers not guaranteed (including running loading animations) when code blocking.
Comments
Post a Comment