防抖函数和节流函数
防抖函数
防抖函数(debounce)可以使函数在n秒内触发重新计时,在此过程中不执行事件处理函数。
防抖函数在ajax请求数据、表单提交数据、输入验证等场景应用比较广泛。
下面模拟一个ajax请求数据的案例。
index.html
<button class="btn">获取数据</button>
<script type="text/javascript"
src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
index.js
var oBtn = document.getElementsByClassName('btn')[0];
oBtn.addEventListener('click', debounce(getDatas, 1000, true), false);
function getDatas () {
$.ajax({
url: 'https://api.apiopen.top/getJoke?page=1&count=2&type=video',
type: 'GET',
dataType: 'JSON',
success: function (data) {
console.log(data);
},
error: function (err) {
console.log(err);
}
})
}
function debounce (fn, time, triggerNow) {
var t = null;
var debounced = function () {
var _self = this,
args = arguments;
if (t) {
clearTimeout(t);
}
if (triggerNow) {
var exec = !t;
t = setTimeout(function () {
t = null;
}, time);
if (exec) {
fn.apply(_self, args);
}
} else {
t = setTimeout(function () {
fn.apply(_self, args);
}, time);
}
}
debounced.remove = function () {
clearTimeout(t);
t = null;
}
return debounced;
}
节流函数
节流函数(throttle)是事件被触发后,n秒内只执行一次事件处理函数。
常用于JS动画等频繁触发的事件中,如resize,touchmove,mousemove,scroll等。
下面模拟一个输入验证的案例。
index.html
<input type="text" id="input" />
index.js
var oInput = document.getElementById('input');
oInput.onkeyup = throttle(check, 1000);
function check () {
var val = this.value;
if (val.length < 6) {
console.log('invalid length');
} else {
console.log('success')
}
}
function throttle (fn, delay) {
var t = null,
begin = new Date().getTime();
return function () {
var _self = this,
args = arguments,
cur = new Date().getTime();
clearTimeout(t);
if (cur - begin >= delay) {
fn.apply(_self, args);
begin = cur;
} else {
t = setTimeout(() => {
fn.apply(_self, args);
}, delay);
}
}
}