Skip to content

taylor12138/daily-h5-utils

Repository files navigation

daily-h5-utils

用于日常使用的工具库

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

快速开始

安装

npm i --save daily-h5-utils

使用

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

函数列表

前置放抖函数

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

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

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

参数

字段名 类型 默认值 含义
leadDebounceCb () => void () => void 防抖执行的回调
delay number 400 防抖时长

返回

分别以万 / 亿 格式化数字

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

numberFormat(10000000)

参数

字段名 类型 默认值 含义
number number 格式化前数字

返回

字段名 类型 默认值 含义
number number | string 0 格式化后数字

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

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

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

参数

字段名 类型 默认值 含义
min number 最小值
max number 最大值

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

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
}
*/

参数

字段名 类型 默认值 含义
time number 当前北京时间的时间戳 时间戳

返回

字段名 类型 默认值 含义
formatStr object 包含年月日时分秒的对象

延时函数

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

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

参数

字段名 类型 默认值 含义
sleepCb () => void () => void 延时的回调
delay number 1000 延时时长

返回

基于requestAnimationFrame的延时函数

对比起 setIntervalsetTimeout的优势

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

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

参数

字段名 类型 默认值 含义
animationSleepCb () => void () => void 延时的回调
delay number 1000 延时时长

返回

About

h5日常utils方法合集

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published