css-throttle

A high-performance solution using css to prevent button double-clicking.

Installing

# use pnpm
$ pnpm install css-throttle

# use npm
$ npm install css-throttle --save

# use yarn
$ yarn add css-throttle

Usage

General use

step 1: import the styles

// use import
import 'css-throttle'
// or use require
require('css-throttle')

Import less file or scss file

// less
import 'css-throttle/less'
// scss
import 'css-throttle/scss'

step 2: Add a className "throttle" to the dom that needs to use throttling

<button onclick="console.log('common save')">I am a "common" save</button>
<button class="throttle" onclick="console.log('throttle save')">I am a "throttle" save</button>

Use css variables to define the transparency of the motion time and inactive state

:root {
  --css-throttle-delay: 2s;
  --css-throttle-opacity: 0.65;
}

Using unpkg CDN

<!-- head -->
<script src="https://unpkg.com/[email protected]/src/index.css"></script>

Support & Issues

Please open an issue here.

License

MIT