js同步异步会引发的问题

有以下代码
html

<td><span class="form-a">打包</span><a href="javascript" download="" style="display: block;">yy</a></td>

js

 $('.form-a').click(function(){
     console.log('bb');
     let span=this
     console.log(span);
     console.log(span.nextSibling);
     span.nextSibling.href='hhh'
     console.log(span.nextSibling);
     }

对于这种情况我想的是第一个span.nextSibling的href会是‘javascript’ ，而
第二个span.nextSibling的href会是‘hhh’
可结果却是

对于意想不到的结果我会使用调试解决

将可停的地方都停掉，最后一步一步观察结果为：
却发现结果跟刚才不一样，当你关掉调试后再运行：

我推测会出现以上情况，可能是因为异步的关系，当第一次输出a还没有来的及输出的时候，就已经将其赋值，最后导致结果出错，而调试是一步一步的执行，相对于同步，反而结果是对，对于调试无法解决的情况，不妨想想同步异步的问题。

我的解决办法：
为图方便，通过定时器让它晚一点赋值，强行达到同步的效果

 $('.form-a').click(function(){
     console.log('bb');
     let span=this
     console.log(span);
     console.log(span.nextSibling);
     setTimeout(function(){
      span.nextSibling.href='hhh'
     console.log(span.nextSibling);
      },100)
     }