While a lot of questions and answers tell me WHY and WHAT the setTimeout(0) is for, I cannot find a very good alternative for it.
My problem
I have a click handler, which executes a function that signals another class to update its status.
That click handler is on the parent element.
I have a checkbox inside that element, which gets checked or unchecked.
Because the click handler is on the parent element, that gets called first. But I need my checkbox to change status before the signal is send.
So I use setTimeout(0) to prevent the signal to be send before the checkbox is checked.
HTML
<div click.delegate="update()">
<div class="checkbox">
<label>
<input checked.bind="group.validated" type="checkbox"> Visibility
</label>
</div>
</div>
JavaScript
update(){
setTimeout(()=>{
this.signaler.signal('refresh-groups');
}, 0);
return true;
}
Basically, what is happening, is that the return true; is executed before the this.signaler.signal function. That way, the checkbox gets checked before the signal is send. Note this won't happen in regular onclick methods where the checkbox status is updated first, but this is the way the Aurelia framework behaves.
I don't like the feeling that I create here. A timeout of 0 seconds means that the function is at the end of the callstack, nothing more. If anything would happen to my return true; statement causing it to wait 0.1 second, I face the same problem.
Is there any alternative that is more trustworthy? Simply using a Promise doesn't seem to do the trick here.
I think the primary issue is you're using the click event which fires before the input element's value changes. Use the change event instead.