一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第14天,点击查看活动详情。
防抖和节流的概念和作用大家都了解或者都大概知道其作用。但是往往还是会容易混淆它们之间。这里我们再来详细讲解一遍防抖和节流。
我们先从我们的实际需求当中来进入。
#函数节流 函数的节流其实就是将可能会非常频繁的执行的函数(函数内部代码高消耗)进行限制,让他在一定的时间内只能执行1次,重复触发(比如滚动、点击)函数内容不会高频重复执行。
需求是:当用户滑动页面时,改条要隐藏,当用户停止了滑动,我们才将它显示出来。
节流示例(opens new window)
解决代码:
//节流处理
var time = 0;
var timer = null;
$(document).on("scroll", function () {
console.log('触发scroll事件');
var con = $(".vv_open_com_btn");
if (!con.length) return;
var nowtime = +new Date();
//节流时间设置的200ms,距离上一次执行操作dom的操作之后,200ms之内不会再次触发
if (nowtime - time > 200) {
con.hide();
time = nowtime;
timer && clearTimeout(timer);
timer = setTimeout(function () {
con.show();
}, 500);
}
});
在简单的页面开发当中,我们上面这个函数的节流处理实际上就成功了,满足了该页面的需求了,但是实际上我们可以把函数的节流单独抽出一个方法来,这样,可以起到函数的复用。
base={};
base.throttle=function(fn,time){
//fn是需要做节流的处理的函数;time 是节流时间
var timeTag=0;
time = time||20;
return function(){
var context = this;
var args = arguments;
var now = +new Date();
if(now - timeTag > time){
fn.apply(context,args);
timeTag = now;
}
}
}
//或者还可以这样
base.throttle1=function(fn,time){
//fn是需要做节流的处理的函数;time 是节流时间
var lock = false;
time = time||20;
return function(){
var context = this;
var args = arguments;
if(!lock){
lock = true;
fn.apply(context,args);
setTimeOut(function(){
lock = false;
},time);
}
}
}
var scrollHandler = base.throttle(function(){
//按钮显示隐藏的逻辑
var con = $(".vv_open_com_btn");
con.hide();
window.hideTimer && clearTimeout(window.hideTimer);
window.hideTimer = setTimeout(function () {
con.show();
}, 500);
},300);
$(document).on("scroll", scrollHandler);
//实际上面这个需求里需要在scroll每次触发时都去清除一次hideTimer,不然会有bug,但这个和我们要讲的节流无关,所以不多赘述.
比如我们点击切换tap的时候常常也会用到节流,因为用户单击tap的按钮,可能会由于手指触摸的原因触发了两次,或者用户就是有意的去快速点击,或者多个按钮快速切换,那么我们不可能会去在每一次点击事件触发时都去请求接口,这样会做很多多余的请求,给浏览器和服务器都带去了不必要的压力。
因此我们这里也会用到函数节流。
#函数防抖 函数的防抖其实就是将可能会非常频繁的执行的函数(函数内部代码高消耗)进行限制,让他在一定的时间之后才会去执行,如果该时间内多次触发,定时器会被重置。
防抖示例
function search(){
console.log('我去请求接口了!');
//请求接口搜索
};
$('.search input').on('input',search);
//这样的请求会很频繁; //比如用户想搜索707436291 的用户,只需要在用户输入结束后请求一次接口; //但上述代码会请求了至少9次
所以我们要做一下防抖的处理;
//防抖处理
function search() {
console.log("我去请求接口了!");
//请求接口搜索
}
var timer = null;
$(".search input").on("input", function () {
timer && clearInterval(timer);
timer = setTimeout(search,500);
});
以上代码就可以让用户在输入框连续输入多个字符时,我们只请求一次接口。与之前的同理,我们也可以将防抖的函数处理功能抽成一个公用的。
base={};
base.debounce=function(fn,time){
//fn是需要做防抖的处理的函数;time 是时间
time = time||20;
var timer = null;
return function(){
var context = this;
var args = arguments;
timer && clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context,args);
},time)
}
}
function search() {
console.log("我去请求接口了!");
//请求接口搜索
}
var searchHandler = base.debounce(search,300);
$(".search input").on("input",searchHandler);
以上是我写的简单简单的防抖节流封装。接下来我们看看别人又是怎么写的呢?比如lodash.js。
以下是loadsh.js的源码;
防抖:
import isObject from './isObject.js' //他引入了一个判断是否时对象的方法
import root from './.internal/root.js'
function debounce(func, wait, options) {
let lastArgs,
lastThis,
maxWait,
result,
timerId,
lastCallTime
let lastInvokeTime = 0
let leading = false
let maxing = false
let trailing = true
// Bypass `requestAnimationFrame` by explicitly setting `wait=0`.
const useRAF = (!wait && wait !== 0 && typeof root.requestAnimationFrame === 'function')
if (typeof func !== 'function') {
throw new TypeError('Expected a function')
}
wait = +wait || 0
if (isObject(options)) {
leading = !!options.leading
maxing = 'maxWait' in options
maxWait = maxing ? Math.max(+options.maxWait || 0, wait) : maxWait
trailing = 'trailing' in options ? !!options.trailing : trailing
}
function invokeFunc(time) {
const args = lastArgs
const thisArg = lastThis
lastArgs = lastThis = undefined
lastInvokeTime = time
result = func.apply(thisArg, args)
return result
}
function startTimer(pendingFunc, wait) {
if (useRAF) {
root.cancelAnimationFrame(timerId)
return root.requestAnimationFrame(pendingFunc)
}
return setTimeout(pendingFunc, wait)
}
function cancelTimer(id) {
if (useRAF) {
return root.cancelAnimationFrame(id)
}
clearTimeout(id)
}
function leadingEdge(time) {
// Reset any `maxWait` timer.
lastInvokeTime = time
// Start the timer for the trailing edge.
timerId = startTimer(timerExpired, wait)
// Invoke the leading edge.
return leading ? invokeFunc(time) : result
}
function remainingWait(time) {
const timeSinceLastCall = time - lastCallTime
const timeSinceLastInvoke = time - lastInvokeTime
const timeWaiting = wait - timeSinceLastCall
return maxing
? Math.min(timeWaiting, maxWait - timeSinceLastInvoke)
: timeWaiting
}
function shouldInvoke(time) {
const timeSinceLastCall = time - lastCallTime
const timeSinceLastInvoke = time - lastInvokeTime
// Either this is the first call, activity has stopped and we're at the
// trailing edge, the system time has gone backwards and we're treating
// it as the trailing edge, or we've hit the `maxWait` limit.
return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
(timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait))
}
function timerExpired() {
const time = Date.now()
if (shouldInvoke(time)) {
return trailingEdge(time)
}
// Restart the timer.
timerId = startTimer(timerExpired, remainingWait(time))
}
function trailingEdge(time) {
timerId = undefined
// Only invoke if we have `lastArgs` which means `func` has been
// debounced at least once.
if (trailing && lastArgs) {
return invokeFunc(time)
}
lastArgs = lastThis = undefined
return result
}
function cancel() {
if (timerId !== undefined) {
cancelTimer(timerId)
}
lastInvokeTime = 0
lastArgs = lastCallTime = lastThis = timerId = undefined
}
function flush() {
return timerId === undefined ? result : trailingEdge(Date.now())
}
function pending() {
return timerId !== undefined
}
function debounced(...args) {
const time = Date.now()
const isInvoking = shouldInvoke(time)
lastArgs = args
lastThis = this
lastCallTime = time
if (isInvoking) {
if (timerId === undefined) {
return leadingEdge(lastCallTime)
}
if (maxing) {
// Handle invocations in a tight loop.
timerId = startTimer(timerExpired, wait)
return invokeFunc(lastCallTime)
}
}
if (timerId === undefined) {
timerId = startTimer(timerExpired, wait)
}
return result
}
debounced.cancel = cancel
debounced.flush = flush
debounced.pending = pending
return debounced
}
export default debounce
节流
import debounce from './debounce.js'
import isObject from './isObject.js'
function throttle(func, wait, options) {
let leading = true
let trailing = true
if (typeof func !== 'function') {
throw new TypeError('Expected a function')
}
if (isObject(options)) {
leading = 'leading' in options ? !!options.leading : leading
trailing = 'trailing' in options ? !!options.trailing : trailing
}
return debounce(func, wait, {
leading,
trailing,
'maxWait': wait
})
}
export default throttle
综合来讲,最终到底是用节流还是防抖,需要我们根据具体需求,具体情境来使用。