记录一个关于 Document.on绑定事件后，导致页面卡顿的情况

Posted 2021-12-07 ning-blogs

假设当前页面的js文件中有如下函数：

  function A(){
    function B();
  }

 function B(){
   $(document).on("click","#元素id",function(){
        dosomething……;
    });
}    

函数A是一个按钮上绑定的onclick函数处理；

那么每次点击按钮触发A函数之后，都会导致B函数的执行，进而 $("#元素id") 这个元素就会绑定一次点击事件。

如果多次触发A函数之后，导致 $("#元素id") 上面绑定多次的点击事件，

然后再点击 $("#元素id") 的时候，就会发现该元素上面的点击事件的逻辑被执行多次，进而导致页面卡顿，表单重复提交等情况。

为避免这种情况，就需要在使用on绑定函数的时候，先使用off解绑之前的函数。如下写法：

$(document).off("click").on("click","#元素id",function(){
        dosomething……;
    });

这样既可避免 元素上绑定的点击事件的逻辑重复执行多次。