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
}
},```