daily-h5-utils v0.0.32

daily-h5-utils

用于日常使用的工具库

本工具库提供了以下功能：

• 前置防抖函数函数 leadDebounce
• 数字格式化函数 numberFormat
• 获取随机整数函数 randomRange
• 格式化时间函数 getBeijingTime
• 延时函数 sleep
• 基于requestAnimationFrame的延时函数 animationSleep

快速开始

安装

npm i --save daily-h5-utils

使用

import {
    leadDebounce,
    numberFormat,
    randomRange,
    getBeijingTime,
    sleep,
    animationSleep
} from 'daily-h5-utils';

函数列表

leadDebounce

前置放抖函数

import {
    leadDebounce,
} from 'daily-h5-utils';

const handleClick = () => {
  console.log('我点击了')
}

leadDebounce(() => {
  handleClick();
}, 1000);

参数

返回

无

numberFormat

分别以万 / 亿 格式化数字

import {
    numberFormat,
} from 'daily-h5-utils';

numberFormat(10000000)

参数

返回

randomRange

在2个区间内随机获取一个整数返回

import {
    randomRange,
} from 'daily-h5-utils';

console.log(randomRange(10, 15)) //12

参数

getBeijingTime

通过传入系统时间，可以获取格式化后对应的年月日时分秒

import {
    getBeijingTime,
} from 'daily-h5-utils';

const formatStr = getBeijingTimeInNumber(new Date());
console.log(formatStr);
/*
{
    "year": 2023,
    "month": 5,
    "date": 3,
    "hour": 17,
    "minute": 59,
    "second": 55
}
*/

参数

返回

sleep

延时函数

import {
    sleep,
} from 'daily-h5-utils';

sleep(1000).then(() => {
	console.log('延时执行');
});

参数

返回

无

animationSleep

基于requestAnimationFrame的延时函数

对比起 setInterval和 setTimeout的优势

• requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
• 在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

import {
    animationSleep,
} from 'daily-h5-utils';

animationSleep(1000).then(() => {
	console.log('延时执行');
});

参数

返回

无