页面防抖以及节流

问题描述

页面元素既绑定单击事件同时绑定双击事件,然而双击的时候还是会触发单击事件,所以要在双击的时候屏蔽单击事件。

解决办法

利用定时器延迟事件处理函数的执行,如果双击则取消单击事件处理函数的执行,仅执行双击事件
HTML

<button id="btn">点击测试</button>

JS

const btn = document.querySelector("#btn"),
      timer;
btn.addEventListener('click',()=>{
    clearTimeout(timer);
    timer = setTimeout(()=>{
        clearTimeout(timer);