1.防抖: 当在程序中高频率的触发某个事件,只让事件执行最后一次
2.节流: 当高频率触发某个事件的时候,让代码执行第一次,第一次执行完成后再执行一次
1.防抖的实现方式:
(1)防抖实现:核心要将实现的功能推迟执行 ----延迟函数
html代码:
<input type="button" value="按钮">
<script src="./lodash.min.js"></script>
//代码演示:
let timeID;
btn.addEventListener('click', function () {
clearTimeout(timeID)
timeID = setTimeout(function () {
console.log('今天放假吗?');
}, 1000)
});
(2)防抖实现也可以用插件:(Lodash插件)
插件网址:Lodash 简介 | Lodash 中文文档 | Lodash 中文网
btn.addEventListener('click', _.debounce(calculateLayout, 1000));
function calculateLayout() {
console.log('今天放假吗?');
}
demo:submit: _.debounce(function() {
this.$refs.uForm.validate().then(res => {
let data = { };
elecSave(data).then((res) => {})
}).catch(errors => {
uni.$u.toast(errors[0].message);
});
}, 500),
2.节流实现方式
(1)原生js实现节流方式
html代码:
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<input type="button" value="向左">
<script src="./lodash.min.js"></script>
js代码:
let btn = document.querySelector('input');
let ul = document.querySelector('ul');
let i = 0;
// 1) 先将事件中要处理的代码单独提取出一个函数
function myclick() {
i++;
ul.style.transform = `translateX(${-300 * i}px)`;
ul.style.transition = 'all 2s';
}
// 2) 对事件中函数进行节流操作
// a) 第一个参数: 要对哪个函数进行节流, fn 形参就是要被进行节流处理的函数
// b) 第二个参数: 要设置每次动作的时间间隔
function jieliu(fn, time) {
// 定义一个变量保存当前开始的时间
let startTime = 0;
return function () {
// 定义一个变量保存当前代码执行的时间
let nowtime = +new Date();
if (nowtime - startTime >= 2000) {
// 调用fn即可
fn();
startTime = nowtime;
}
};
}
btn.addEventListener('click', jieliu(myclick, 2000));
(2)使用插件完成节流操作:
btn.addEventListener('click', _.throttle(myclick, 2000));