从防抖节流再次思考业务,怎么让用户体验更佳

从防抖节流再次思考业务,怎么让用户体验更佳

三月 14, 2021 本文共计: 703 字 预计阅读时长: 2分钟

前言

早些时候看到了防抖节流的一个新的实现,传送门;

当看到第四部分的实现,源码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 第四版
function debounce(func, wait, immediate) {

var timeout;

return function () {
var context = this;
var args = arguments;

if (timeout) clearTimeout(timeout);
if (immediate) {
// 如果已经执行过,不再执行
var callNow = !timeout;
timeout = setTimeout(function(){
timeout = null;
}, wait)
if (callNow) func.apply(context, args)
}
else {
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
}

对于这个immediate参数也是不明觉厉,思考了一番,那我们之前的用法岂不是稍微有一点问题的?
带着这个疑问,我再次打开了IDE,开始调试代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

// 连续触发 n 秒后执行
// 连续触发,但是只执行第一次触发的函数,之后在n秒后,再次执行函数

const debounce = (fn, delay, immediate = false) => {
let timer;

return (...rest) => {
if(timer) { clearTimeout(timer) }
// 当开启立即模式,也就是先执行,后防抖,更加合理
if(immediate) {
const nowDo = !timer;
timer = setTimeout(() => {
clearTimeout(timer);
}, delay);

if (nowDo) {
fn.apply(this, rest);
}
} else {
timer = setTimeout(() => {
fn.apply(this, rest);
}, delay);
}
};
}

// 模式一

const print = () => { console.log("dayin") }

const deP = debounce(print, 800)
console.log('模式一')
deP()
deP()
deP()
deP()
deP()

console.log('模式二')

const deP2 = debounce(print, 800,true)

deP2()
deP2()
deP2()
deP2()
deP2()
deP2()

分别从两种模式出发,看到了这个参数的作用,这个时候真实眼前一亮,这不是更符合用户体验规则。

从开发人员过度到用户,我们始终追求的是用户体验极致的效果,因为,用户希望一点击之后就会有效果,而不是点击后若干秒之后再去响应

demo如下:

应该可以很清晰看到:模式二先执行,并且只打印了一次,而模式一后执行,也只打印了一次。

真实线上体验

以下是我重构且维护过的一块业务逻辑,其中登陆为了防止用户恶意触发登陆接口,所以加了防抖控制。

略微有点缺陷就是,防抖时机可能不太合适,后续可以考虑优化掉,虽然影响不大,但是程序猿就是要追求极致。

番外篇

今天是白色情人节,这么晴朗的日子里,小王当然是在KFC陪我的代码女朋友度过了。

生活中有许多我们可以坚持的事,无论好与坏,都是值得的。

有若干次都有一种感觉,仿佛回到了高三那个时候,再次寒窗苦读,这或许就是学习负债吧,学校不努力,毕业徒伤悲,再次给补回去。

为了什么呢?让自己变聪明点吧,通过不断思考,希望勤能补拙。