# debounce-save

> autoSave debounce save

Latest version **1.0.8** (published 2019-06-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install debounce-save
pnpm add debounce-save
yarn add debounce-save
bun add debounce-save
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2019-06-13 |
| First published | 2019-05-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 743.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | one_zhd |
| Maintainers | one_zhd |
| Keywords | debounce, save, autosave |

## Links

- npm: https://www.npmjs.com/package/debounce-save
- Repository: https://github.com/shuaiadong/debounce-save
- Homepage: https://github.com/shuaiadong/debounce-save#readme
- Issues: https://github.com/shuaiadong/debounce-save/issues
- npm.io page: https://npm.io/package/debounce-save

## Dependencies (2)

- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.4.5

## Recent versions

- 1.0.8 (latest) — 2019-06-13
- 1.0.7 — 2019-05-31
- 1.0.6 — 2019-05-31
- 1.0.5 — 2019-05-30
- 1.0.4 — 2019-05-24
- 1.0.3 — 2019-05-23
- 1.0.1 — 2019-05-22
- 1.0.0 — 2019-05-22

## README

### 安装

> npm install debounce-save -S
> or
> yarn add debounce-save

### 触发自动保存的场景

- 数据改发生变时
- 用户关闭页面时
- 组件卸载时

### live demo

[demo](https://shuaiadong.github.io/debounce-save/index.html#/)

### 注意事项

> autosave 提供了`save` `debouncedSave` `cancel` ...`api`不要直接调用 ajax 请求 -> 破坏 autoSave 内部的生态系统

- 例如
  - 用户操作 修改了本次周报 切换 上周周报
  - state 的数据变成了上周
  - 因为 debounced 是延时执行，触发时 -> 获取数据是上周的数据

> 解决方案 - 用户切换时应该马上触发保存 `api` save

#### 入参

```js

     // 默认参数
              wait: 2000,                   // default 防抖时间
              onSave: null,                 // 自动保存事件(ajax)
              onBeforeSave: null,           // 调用onSave 之前调用
              saveMessage: '确定要离开吗？',   // 提示语
              leading: false,               // 超时前调用
              maxWait: 1,                   // 延迟的最长时间
              trailing: true,               // 超时后调用

```

### api

```js
// 暴露的debounced save 供数据发生改变时调用
debouncedSave

// 直接调用save的方法
save

// 取消事件
cancel

// 清空
flush

// 退出时的事件(组件销毁时 | 直接调用保存事件)
exit
```

### Usage

```js
import React, { Component } from 'react'
import autoSave from 'debounce-save'

export default class AutoSave extends Component {
  constructor(props) {
    super(props)
    this.autoSave = autoSave({
      onSave: () => {
        setTimeout(() => {
          this.setState({ log: `value = ${this.state.value},  success` })
        }, 0)
      }
    })
  }
  state = {
    value: '',
    log: 'log'
  }
  /**
   * autoSave({})
   * return ->
   *         debouncedSave
   *         save
   */

  render() {
    return (
      <div>
        <p>{this.state.log}</p>
        <input
          value={this.state.value}
          onChange={({ target: { value } }) => {
            this.setState({ value }, () => this.autoSave.debouncedSave())
          }}
        />
      </div>
    )
  }
}
```

### demo

- cd \_demo
- npm i
- npm run server

---
_Source: https://npm.io/package/debounce-save · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._