一、防抖
触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间
- 思路:
动作绑定事件,动作发生后一定时间后触发事件,在这段时间内,如果该动作又发生,则重新等待一定时间再触发事件。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
举个例子,假如你有一个需求是用户在input框中输入一串字符后,自动发一个ajax请求,如果不做防抖,则用户每次改变字符串(删掉字符或输入新字符)都会发送一次请求,但是如果做防抖处理,当用户输入一个字符后,过了0.5秒也没有改变字符串(这大概率表示用户已经完成字符串输入),则发送请求,如果在0.5秒内改变了字符串(这大概率表示当前字符串不是用户要输入的最终字符串),则暂不发送请求,继续重新计算0.5秒,直到用户停顿超过了0.5秒,再发送请求。
二、节流
当持续触发事件时,保证一定时间段内只调用一次事件处理函数。所以节流会稀释函数的执行频率
- 思路:
动作绑定事件,动作发生后一段时间后触发事件,在这段时间内,如果动作又发生,则无视该动作,直到事件执行完后,才能重新触发。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
三、结合应用场景
debounce(防抖)
-
search搜索联想,用户在不断输入值时,用防抖来节约请求资源。
-
window触发resize的时候,不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次
. throttle(节流)
-
鼠标不断点击触发,mousedown(单位时间内只触发一次)
-
监听滚动事件,比如是否滑到底部自动加载更多,用throttle来判断
暂无评论内容