Bootstrap

vue项目中使用防抖节流

1.防抖(只能在页面中生效,写成公共方法暂时用不了)

1.1 html点击事件
 <button @click="goname">1</button>
1.2定义的方法
 data() {
    return {
      timeout: null, // 定义初始值
    };
  },
  // 防抖方法
debounce(func, delay) {
  let context = this; // this指向发生变化,需要提出来
  let args = arguments;
  return (function () {
    if (context.timeout) {
      clearTimeout(context.timeout);
    }
    context.timeout = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  })(); // 注意:我加了()
},
//事件
goname() {
    this.debounce(() => {
    console.log("1111"); // 只执行最后一次点击事件
  }, 500);
},

2.节流

data() {
    return {
      flag: false, // 没有执行,可以执行第一次
    };
  },
	if (this.flag) {
	      console.log("已经执行了,技能在cd中");
	      return false;
	    }
	     this.flag = true; // 准备执行第一次,防止点击第二次生效,
	    setTimeout(() => {
	      console.log("开始执行,发送接口请求");
	      this.queryDetail();
	      this.flag = false; // 执行完第一次,允许执行第二次
	    }, 1500);  

注:每次执行前都会延迟,第一次也延迟了

3.(节流之页面滑动到底部加载数据)
注:安卓可以正常使用,ios滑动到底部会一直执行事件发接口-所以滑倒底部回弹一个px
<div class="boxList" @scroll="Scrollbottom">
	<p>99</p>
	<p>99</p>
	<p>99</p>
</div>
 data() {
    return {
      flag: false, // 声明一个开关
    };
  },
 created() {
    window.addEventListener("scroll", this.Scrollbottom); //页面加载时监听滚动事件
  },
  destroyed() {
    window.removeEventListener("scroll", this.Scrollbottom); //页面离开后销毁监听事件
  },
  // methods中监听下滑到底部,开始发请求接口,请求数据
  Scrollbottom(e) {
    let that = this;
    let conScrollHeight = e.target.scrollHeight; // 可以滚动区域的高度
    let conClientHeight = e.target.clientHeight; // 区域内容的高度
    let conScrollTop = e.target.scrollTop; // //  内容滚动了的高度
    if (conScrollTop + conClientHeight >= conScrollHeight) {
      console.log("滚动到底部了");
      // 根据条件判断是否要发接口
 	if (that.totalCounts > that.pageSize && that.totalCount == that.pageSize) {
        if (that.flag) {
          console.log("已经执行了,技能在cd中");
          return false;
        }
        setTimeout(() => {
          e.target.scrollTop -= 1; // 页面回弹方法
          console.log("开始执行,发送接口请求");
          that.flag = false;
          that.pageNo += 1;
          //that.queryDetail();
        }, 1500);
        that.flag = true;
      } else {
        // 如果总数 < 请求时每页个数,或请求回来的每页个数 < 请求时上传的每页个数,那就继续发接口请求
        that.isToload = true;
        return;
      }
    } else {
      return;
      // this.isToload = true
    }
  },```

;