b553c4e519
- API 路由统一: 移除 /api/h5/，统一 /api/pms/ 入口 - 二进制改名: api-server -> pms-api（与服务名一致） - nginx: 合并 /api/ + /pms/api/ 为 /api/pms/ - 新增 docs/API.md 接口文档 - 后端: CabinetDetail 增加 rssi/pow_fail/address/soc 等字段 - Redis 管道批量读取仓体实时数据（SOC/电压/电流/功率） - DB: 所有 TIMESTAMP 列改为 DATETIME（修复类型不匹配） - 用户管理: 新增创建时间/修改时间列，状态改用 Switch - 角色管理/用户管理: 操作按钮改为图标 - PC 设备详情: 基本信息补全 RSSI/ICCID/电源/地址 - PC 卡片: 通道统计改用 Lucide 图标，颜色统一 - PC 二维码: canvas 渲染，含编号文字，支持右键下载 - H5: 按 uni-app 规范修正导航（navigateTo 替代 reLaunch） - H5: 详情页加返回导航条 - H5: 扫码支持摄像头（jsQR）+ ?id= 参数 - H5: 底部 tabBar 在所有页面常显 - H5: 首页统计改为 6 项（设备/通道/空闲/充电/充满/故障） - H5: 下拉刷新 / 上拉加载 - 产品首页: 添加业务联系 - 文档: 清理过时文件，补充缺失规范章节
2.7 KiB
2.7 KiB
category, related
| category | related |
|---|---|
| Utilities | useThrottleFn |
useDebounceFn
Debounce execution of a function.
Debounce is an overloaded waiter: if you keep asking, your requests will be ignored until you stop and give them some time to think about your latest inquiry.
Usage
import { useDebounceFn, useEventListener } from '@vueuse/core'
const debouncedFn = useDebounceFn(() => {
// do something
}, 1000)
useEventListener(window, 'resize', debouncedFn)
You can also pass a 3rd parameter to this, with a maximum wait time, similar to lodash debounce
import { useDebounceFn, useEventListener } from '@vueuse/core'
// If no invokation after 5000ms due to repeated input,
// the function will be called anyway.
const debouncedFn = useDebounceFn(() => {
// do something
}, 1000, { maxWait: 5000 })
useEventListener(window, 'resize', debouncedFn)
Optionally, you can get the return value of the function using promise operations.
import { useDebounceFn } from '@vueuse/core'
const debouncedRequest = useDebounceFn(() => 'response', 1000)
debouncedRequest().then((value) => {
console.log(value) // 'response'
})
// or use async/await
async function doRequest() {
const value = await debouncedRequest()
console.log(value) // 'response'
}
Since unhandled rejection error is quite annoying when developer doesn't need the return value, the promise will NOT be rejected if the function is canceled by default. You need to specify the option rejectOnCancel: true to capture the rejection.
import { useDebounceFn } from '@vueuse/core'
const debouncedRequest = useDebounceFn(() => 'response', 1000, { rejectOnCancel: true })
debouncedRequest()
.then((value) => {
// do something
})
.catch(() => {
// do something when canceled
})
// calling it again will cancel the previous request and gets rejected
setTimeout(debouncedRequest, 500)
Recommended Reading
Type Declarations
export type UseDebounceFnReturn<T extends FunctionArgs> = PromisifyFn<T>
/**
* Debounce execution of a function.
*
* @see https://vueuse.org/useDebounceFn
* @param fn A function to be executed after delay milliseconds debounced.
* @param ms A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
* @param options Options
*
* @return A new, debounce, function.
*
* @__NO_SIDE_EFFECTS__
*/
export declare function useDebounceFn<T extends FunctionArgs>(
fn: T,
ms?: MaybeRefOrGetter<number>,
options?: DebounceFilterOptions,
): UseDebounceFnReturn<T>