JS对象类型-函数进阶篇-函数节流和函数防抖
函数防抖
函数防抖就是短时间内频繁触发的事件或函数,指定时间间隔内频繁触发会被忽略掉。
比较常见的如搜索联想功能,如果打字很快,这期间不需要调用后台接口。
// 防抖函数
function debounce(method, context) {
clearTimeout(method.tId)
method.tId = setTimeout(function(){
method.call(context)
}, 500)
}
// 使用
var demo = function(){
console.log(1)
}
window.onresize = function(){
debounce(demo, window)
}
函数节流
函数节流是使短时间内连续执行的事件或函数,变为固定时间间隔执行。
比较常见的比如疯狂点击轮播图的按钮时,轮播图依旧按照指定的轮播时间执行。射击游戏疯狂触发mousedown/keydown事件时,子弹按照指定间隔时间发射。
// 节流函数
function throttle(method, context) {
if(method.tId) { // 忽略新函数
return false;
}
method.tId = setTimeout(function(){
clearTimeout(method.tId)
method.tId = null
method.call(context)
}, 500)
}
// 使用
var demo = function(){
console.log(1)
}
window.onresize = function(){
throttle(demo, window)
}
下面是一个完整的节流函数,接收两个参数:第一个表示要被延时的函数;第二个表示延时的时间。
var throttle = function(method, time) {
var _self = method, timer = null, firstTime = true;
return function() {
var args = arguments, _this = this;
if(firstTime) {
_self.apply(_this, args); // 首次触发,无需延时
return firstTime = false;
}
if(timer) { // 定时器还在,说明当前函数未执行完,后续函数忽略
return false;
}
timer = setTimeout(function(){
clearTimeout(timer)
timer = null
_self.apply(_this, args)
}, time || 500)
}
}
window.onresize = throttle(function(){
console.log(1);
}, 500 );
节流函数和防抖函数是有区别的:节流函数是指定间隔内触发,比如每1秒执行一次,那么无论你触发多么频繁它都不关心,必须1秒后才执行;而防抖函数是要两次触发的间隔时间超过指定时间,所以这期间如果频繁触发都会被忽略掉。
胖胖熊技术网,基于人工智能的编程学习网站