Laravel/FancyTree 中 Jquery 对 CSS 所做的更改仅反映在 function 的末尾

Question

I currently have a fancy tree where when activating a node, it will run through a bunch of ajax/backend code which consumes time.

Desired outcome: When clicking on a node, the active event handler should catch the event and display a loading icon until all the following code is completed before the loading icon is removed however, the CSS changes made by the jquery is not running until after the function is already completed even though the jquery command has already been called prior to the additional set of ajax and backend code. This results in the loader not being reflected at all.

Poor solution: Setting a windows timeout between the toggling of the visibility of the loader allows the loader to actually be reflected onto the screen before removing it again.

activate: function(event, d) {
console.log('make loader appear');
 $('#loader').css('display','block')
//bunch of random code here
$('#loader').css('display','none')
}

Answer 1

I think that probably because after you show the loading indicator you hide it right away.

See your code in event activate function:

$('#loader').css('display','block') //bunch of random code here $('#loader').css('display','none')