自定义指令

局部directive的写法
directives:{
  noMoreClick: {
    inserted(el, binding) {
      el.addEventListener('click', () => {
        el.classList.add('is-disabled');
        el.disabled = true;
        setTimeout(() => {
          el.disabled = false;
          el.classList.remove('is-disabled');
        }, 3500)
      })
    }
  }
},

标签使用
<el-button size="small" @click="resetForm" v-no-more-click> Confirm </el-button>

防抖动

含义:在多次触发时(不间断点击N秒),点击停止3秒后触发函数 (常用于keydown事件上验证用户名等)

  // 函数防抖
  let timer = false;
  document.getElementById("throttle").onclick = function(){
    clearTimeout(timer);
    timer = setTimeout(()=>{
      console.log("执行买的http请求");
      console.log(timer);
    },2000)
  };

函数节流

含义:在多次触发时(不间断点击N秒),每隔3秒触发一次函数,常用于resize改变布局,scroll滚动事件等

  // 函数节流
  let flag = true;
  document.getElementById("throttle").onclick = function(){
    console.log("买");
    if(!flag){ return }
    flag = false;
    setTimeout(()=>{
      flag = true;
      console.log("执行买的http请求")
    },2000)
  };