Throttle 与 Debounce 使用场景

Photo by Cristina Gottardi on Unsplash

不管什么技术概念,都要落到实际使用场景比较容易理解。Throttle 和 Debounce 也是一样,这里我分别解释一下。

单位时间只做一次使用 Throttle

单位时间只做一次使用 Throttle。PC 上有些操作在小程序真机上延迟特别明显,比如点击按钮展开菜单的动画,假如用户点击频率过高就会导致小程序显示异常。为了解决这个问题,需要在单位时间比如 500ms 之内对用户点击只响应一次,这样可以减少动画调用的频率。

等待操作不再发生使用 Debounce

等待操作不再发生使用 Debounce。比如我们搜索根据关键词从实时后台拿到商品名称,我们不知道用户什么时候结束输入。假如每监听一个关键字就去后台拿数据会导致后端压力比较大。那么再前端就可以做一个 Debounce。当用户键入一个关键字后等待 500ms,若这 500ms 之内没有新的输入,当作用户结束输入,然后再去后台请求数据,可以减轻后端压力。

发表评论

邮箱地址不会被公开。 必填项已用*标注