1.0.0 • Published 12 months ago

key-debounce v1.0.0

Weekly downloads
-
License
ISC
Repository
github
Last release
12 months ago

简介

对象属性频繁赋值时,增加防抖策略。通过Proxy代理整个对象;拦截属性赋值,并使用防抖策略,实现页面状态跳变优化

防抖(Debounce)是一种编程技巧,通常用于限制函数在一定时间内的调用频率。它的主要目的是防止某个函数在短时间内被频繁调用,从而减少不必要的开销和副作用。例如,当用户在一个输入框中快速输入内容时,每次输入都会触发一个搜索操作,使用防抖可以确保只有用户停止输入一段时间后才触发一次搜索。


安装使用

npm i key-debounce

参数说明

  • 初始化
new KeyDebounce(initState: Object, debounceDelay:Number)
  • initState:对象,设备状态对象
  • debounceDelay:数字,防抖时间,单位 ms,默认 700

例子

const deviceState = new KeyDebounce({ power: 'on', temperature: 20, mode: 'auto' })

deviceStore = defineStore('deviceStore', {
    state: () => ({
        deviceState: new KeyDebounce({ power: 'on', temperature: 20, mode: 'auto' }),
    }),
})

  • 更新值方法
// 立即更新,不受影响;会触发updateState的防抖
deviceState.temperature = 18
deviceState.temperature = 19
deviceState.temperature = 20

/**
 * 批量更新状态
 * 防抖周期外,第一次更新某个值会立即同步,持续调用更新某个值才会触发防抖
 * @param {Object} newState - 新状态对象
 * @param {boolean} [immediateSync=false] - 是否立即同步,默认false;
 */
updateState(newState, immediateSync)