javascript - jQuery关于当前对象在绑定事件结束前已不存在的疑问

Question

$(document).on('click', '#JS_btn1', function(e) {
      var self = $(this);
      setTimeout(function(){
        self.parent('p').html('<a href="javascript:void(0);" class="btn_ok" id="JS_btn2">确定</a>');
      });
    })

点击#JS_btn1后查找父节点 p 并替换子节点按钮为#JS_btn2，就是说在监听事件结束前就把btn1给消灭了替换成btn2，假如不加setTimeout则在IE7/8报错（其他浏览器没有），为什么加上setTimeout就没事？

Answer 1

不加setTimeout时为单线程操作，相当于在执行事件的过程中（事件的作用域还未结束）事件的触发主体已经失效，该线程中事件上下文的完整性被破坏，这会在IE特定版本中报错，而其它浏览器则予以静默（可以视为一种优化）。

加setTimeout的话，代码中处理dom的过程被分离到一个单独的线程中执行，事件在主线程中没有破坏，可以成功完成，而dom处理则在另一个线程中去完成它的生命周期。（PS，一般来说，dom处理相对于js本身是一个很慢的操作，处理结果不会反映到即时完成的主线程中）

Answer 2

建议点击#JS_btn1后只是隐藏掉#JS_btn1，然后显示#JS_btn2，尽量减少js对dom的修改。