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

假设当前页面的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……;
    });

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

原文地址:https://www.cnblogs.com/ning-blogs/p/10927073.html