在实际前端项目中, 会有一些场景 , 在用户点击按钮时 ,因手抖等各种原因多次点击 , 重复提交请求 . 因此 , 通常情况下,会要求前后端均做一些限流/防手抖策略 . 这里简单说一下各前端如何去实施的.
防抖和限流是我们再开发过程中常用的优化性能的方式
通常 , 我们会给重要请求的按钮设置限制 , 比如 500ms 只能提交一次
Android (Java)
Android 中我们使用 RxBinding
来实现 .
添加依赖
build.gradle
1 | // 查找对应版本填入 |
RxBind.java
1 | public class RxBind { |
调用
1 | RxBind.click(button, view -> doSomething()); |
这里是使用到了 RxJava
中的 throttleFirst
操作符 , 意为事件流的触发距第一次触发需要间隔500ms才能生效.
iOS (Swift)
iOS (Swift) 中我们通过 RxSwift
来实现
Podfile
1 | # 查找对应版本填入 |
UIButtonExtension.swift
1 | extension UIButton { |
调用
1 | button |
前端(Javascript)
1 | /** |
使用:
1 |
|
在Vue中使用
首先定义公共js
1 | // 防抖 |
引用
1 | import { _debounce } from "@/utils/public"; |
调用
1 | methods: { |
Flutter
pubspec.yaml
1 | rxdart: ^0.22.2 |
调用示例
1 | import 'package:rxdart/rxdart.dart'; |