前端--click单双击问题及函数节流与防抖问题

不折腾的前端，和咸鱼有什么区别

本篇博客，我们将探讨2个问题，click单双击问题及函数节流与防抖问题，其实都是关于click事件的探讨，当我们对一个按钮进行单击或者双击，或者多次点击，当我们频繁触发click事件时，这时就涉及到我们的函数节流与防抖问题。

• 单双击（仿双击）

在js中，同一个功能块可能会遇到单击、双击事件两种事件，当我们执行双击事件时，同时也执行了2次单击事件。任何避免执行双击事件时，不执行单击事件。这时我们需要对单击事件进行延时，如果在此延时中又监测到单击事件，那么认为此两次单击属于一个双击事件，则只执行双击事件，并第一时间将延时定时器清理，以防止第二次单击生效。
具体代码如下：

方法一：
对单击事件进行延迟执行

var clickFlag = null;//是否点击标识（定时器编号）
function doOnClick(...) {
   
    if(clickFlag) {
   //取消上次延时未执行的方法
        clickFlag = clearTimeout(clickFlag);
    }
    
    clickFlag = setTimeout(function() {
   
        // click 事件的处理
    }, 300);//延时300毫秒执行
}

function doOnDblClick(...) {
   
    if(clickFlag) {
   //取消上次延时未执行的方法
        clickFlag = clearTimeout(clickFlag);
    }
    
    // dblclick 事件的处理
}

方法二：
利用仿双击原理

var lastClick = 0;
function doClick(...){
   
   var timeNow = new Date().getTime();
   if(timeNow - lastClick < 500){
   
     // this.doDbclick();   //执行双击事件函数
     this.lastClick = 0;
     return;
   }
   this.lastClick = timeNow;
   //  执行单击事件代码
}

• 函数节流与防抖（防止多次点击、重复点击、或点击过快）

函数节流与函数防抖是我们解决频繁触发DOM事件的两种常用解决方案。DOM操作比起非DOM交互，需要更多的内存和CPU时间，连续尝试过多的DOM操作可能会导致浏览器挂起，甚至崩溃。

一：函数节流

概念：指定时间间隔内只会执行一次任务。若有新事件触发，不执行。周期结束后，又有事件触发，开始新的周期。

举个栗子：一个水龙头在滴水，可能一次性会滴很多滴，但是我们只希望它每隔 500ms 滴一滴水，保持这个频率。即我们希望函数在以一个可以接受的频率重复调用。

实现方式：使用定时器对函数进行节流，即第一次调用函数，创建一个定时器，在指定的时间间隔后运行代码。当第二次调用该函数的时候，它会清除前一次的定时器并设置另外一个。

代码：

// 函数节流 throttle
// 方法一：定时器实现
const throttle = function(fn,delay) {
   
  let timer = null

  return function() {
   
    const context = this
    let args = arguments
    if(!timer