curTain

写一个防抖与节流。

1. 防抖

什么是防抖:

当一个事件触发后,在 n 秒后才执行相关函数,如果在 n 秒内再次触发事件,则在新事件 n 秒后才执行相关函数。

函数功能设计与实现原理:

用户可以根据需求自传定义执行函数、间隔时间、是否立即执行来传入对应的参数。

使用闭包函数,设置一个定时器作为标志放在闭包内,使用函数柯理化接收传入参数。

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
* 防抖函数
* @param fn 回调函数
* @param time 间隔时间 type number
* @param immediate 立刻执行 type boolean
*/

function debounce( fn, time, immediate = false ){
let timeount
return function(){
if( timeount ){ clearTimeout( timeount ) }
if( immediate && !timeount ){ fn.apply( this, arguments ) }

timeount = setTimeout( () => {
// 此处运用函数柯理化 arguments 为调用函数时的参数
fn.apply( this, arguments )
// 此处放开注释-会让每一次执行完后,第一次都会立即执行一次
// timeount = null
}, time || 500 )
}
}

测试:

自建html文件测试
1
2
3
4
5
6
function go( e ){
console.log( e )
}
document.addEventListener( "mousemove", debounce( go, 500, false ) )
// 自传参数
debounce( go, 500, false )( "我是自己传进去的参数--" )

2. 节流

什么是节流:

节流,就是指连续触发事件但是在 n 秒中只执行一次函数。 节流会稀释函数的执行频率。

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
* 节流函数
* @param fn 回调函数
* @param time 间隔时间 type number
* @param immediate 立刻执行 type boolean
*/

function throttle( fn, time, immediate = false ){
let timeount
let isFrist = true
return function(){
if( immediate && isFrist ){
fn.apply( this, arguments )
isFrist = false
}
if( !timeount ){
timeount = setTimeout( () => {
fn.apply( this, arguments )
timeount = null
}, time || 500 )
}
}
}

测试:

自建html文件测试
1
2
3
4
5
6
function go( e ){
console.log( e )
}
document.addEventListener( "mousemove", throttle( go, 500, true ) )
// 自传参数
throttle( go, 500, false )( "我是自己传进去的参数--" )

总结:

防抖和节流在代码中被使用的频率还是蛮大的,

函数的编写有借鉴,也有自己的思考,感觉自己思考过后,才会对函数有更深的理解。

防抖可以运用在:

  1. window 的 resize、scroll
  2. mousedown、mousemove
  3. keyup、keydown
  4. 搜索自动弹出 搜索联想

防抖函数要点:

  1. 每一次触发事件,都要清除定时器,并重置 timeout 定时器。

节流函数要点:

  1. 每次执行完函数后,都要把标志置为null

参考

wclimb–JavaScript之节流与防抖

函数防抖和节流

JavaScript专题之跟着 underscore 学节流

JavaScript专题之跟着underscore学防抖


 评论