最直观的是百度的搜索框,肯定不是输入一个字母就立即查询,而是等你输完一小段时间才会发起请求。
防抖:
基本思路:定义一个定时器,假设延时1000ms,如果你正在输入内容,定时器不断刷新,不断延时1000ms,不触发请求,当停止输入时,定时器生效,发送请求
Html:
<input type="text" id="input1" />
JS如下
// 定义防抖函数
function debounce(fn, delay=500) { // (操作函数,延时时间)
let timer = null;
return function() {
if (timer) {
clearTimeout(timer); // timer存在则清除
}
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay);
}
}
const input = document.getElementById("input1");
input.addEventListener('keyup', debounce(function(){
console.log(input.value);
}, 1000));
节流:
还是使用定时器,每固定一个时间段触发一次请求,下面以拖动div,console它的位置为例
Html:
<div id="drag" draggable="true" style="width: 200px;height: 100px;border: 1px solid #f00;">可拖拽</div>
JS:
// 定义节流函数
function throttle(fn, delay=500) { // 操作函数,延时时间
let timer = null;
return function() {
if (timer) {
return;
}
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay)
}
}
const drag1 = document.getElementById('drag');
drag1.addEventListener('drag', throttle(function(e) { // 监听拖拽事件
console.log(e.offsetX, e.offsetY); // 打印当前位置
}, 1000))