Knockout.js. The boot counter appears only after the operation.

Question

I am trying to understand KnockoutJS. I want to use a counter while executing some code. But why does the spinner appear only after the operation?

<img data-bind="visible: isLoading" src="loading.gif"> <a href="#" data-bind="click: someOperation">Click</a> <script type="text/javascript" src="knockout-2.2.1.js"></script> <script> var ViewModel = function() { var self = this; self.isLoading = ko.observable(false); self.someOperation = function() { self.isLoading(true); for(i = 0; i < 30000; i++) console.log('lol'); self.isLoading(false); }; }; ko.applyBindings(new ViewModel()); </script> 

Thanks Fedor

Answer 1

EDITED: The first answer was wrong!

In chrome, the console is asynchronous, and console.log () does not happen where it was expected.

Using setTimeout works great. See this fiddle script

 var ViewModel = function() { var self = this; self.isLoading = ko.observable(false); self.someOperation = function() { self.isLoading(true); window.setTimeout(function() { self.isLoading(false) }, 1000); //for(i = 0; i < 30000; i++) // console.log('lol'); ///self.isLoading(false); }; }; ko.applyBindings(new ViewModel());