js阻止函数连续执行

一、问题描述

当一些情况下时，我们不希望我们的js方法被连续的执行，比如说登录按钮的点击事件，我们不希望用户恶意的点击出现一些意外情况。还有一些vue中的自定义事件传值函数，我们希望其不被连续触发，而是接收其最后一次触发的值

二、实现思路

我们可以在每次事件触发时将我们的方法增加一个定时器，当然增加之前要进行一个判断，如果已有定时器说明已经处在执行队列中，清除其定时器，让其继续等待执行。当定时器结束时在执行需要触发的方法。

三、代码实现

1.不需要传递参数

延迟执行方法：
其中delay接收一个需要被执行的函数，他会在事件触发一秒后执行，且执行的是最后一次被触发的函数

function delay(func) {
    if (func.timeoutId) {
      window.clearTimeout(func.timeoutId);
    }
    func.timeoutId = window.setTimeout(function() {
      func();
      func.timeoutId = null;
    }, 1000);
  }

具体演示：

  let a = 0
  function btnClick() {
    console.log(a);
  }

  function delay(func) {
    console.log('delay');
    a++
    if (func.timeoutId) {
      window.clearTimeout(func.timeoutId);
    }
    func.timeoutId = window.setTimeout(function() {
      func();
      func.timeoutId = null;
    }, 1000);
  }

我们点击了8次实际上btnClick只执行了最后一次

2.传递参数

我们同样可以传递一些参数：

  let a = 0
  function btnClick(name) {
    console.log(a + '-' + name);
  }

  function delay(func, name) {
    console.log('delay');
    a++
    if (func.timeoutId) {
      window.clearTimeout(func.timeoutId);
    }
    func.timeoutId = window.setTimeout(function() {
      func(name);
      func.timeoutId = null;
    }, 1000);
  }