Vue防抖（三种方式）

做个记录，三个方法
Vue最新防抖方案(必看篇)

1.debounce

函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

2.throttle

函数节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

//  _为自己命名
import _ from 'lodash'

// debounce
方法名:_.debounce(function(传递参数){
        //具体方法
      },300),

// throttle
方法名:_.throttle(function(传递参数){
        //具体方法
      },300),

3.disabled（一种思路）

div模块是无效的，主要还是button，相比上述两种方法来说，更适合类似发布文章这类，因为网络传输时间不确定等，直接让按钮失效，等成功后再恢复，防止重复请求。

<div>
      <button class="fix-bottom-button lr16" @click="publish" :disabled="isDisabled">发布</button>
</div>

这里的Toast是vant的提示哈，懒得删了，主要是this.isDisabled设置true和false

//发布方法
    publish(){
        this.isDisabled = true;
        const formData = new FormData();
        formData.append("title", this.title);
        formData.append("content", this.context);
        if(this.uploadFileList){
          this.uploadFileList.forEach(file => {
            formData.append("files", file.file);
          })
        }
        formData.append("isAnonymous", this.checked ? 1 : 0);
        Toast.loading({
          duration: 0, // 持续展示 toast
          message: '发帖中...',
          forbidClick: true,
        });
        $apis.forum.publishMessage(formData).then((res) => {
          if (res.code == "ok") {
            Notify({ type: "success", message: "发布成功" });
            this.isDisabled = false;
            this.$router.go(-2);
          } else {
            Notify({ type: "warning", message: "发布失败,请重试！" });
          }
          Toast.clear();
        });
    },