Perf

useRic

包裹了 requestIdleCallback 和 cancelIdleCallback 的一个封装函数
兼容了浏览器的不同版本
简化了调用方式

/**
 * @func useRic
 * @desc 📝 打印
 * @param { Function[] } tasks 待执行的任务数组
 * @param { number } timeout 超时时间(单位:毫秒)
 * @param { () => void } callback 执行完成后的回调函数
 * @return { () => void } 停止函数
 * @example
  import { useRic } from 'lazy-js-utils'

  // useRic(tasks,()=>{console.log('end')}) // 默认第二个参数为2000的简写
  const tasks: Function[] = [
    () => {
      for (let i = 0; i < 3000; i++) {
        console.log(i);
      }
      console.log("first task");
    },
    () => {
      for (let i = 0; i < 30000; i++) {
        console.log(i);
      }
      console.log("second task");
    },
    () => {
      for (let i = 0; i < 30000; i++) {
        console.log(i);
      }
      console.log("third task");
    },
  ];
  // 封装前的场景
  requestIdleCallback(fn, { timeout: 1000 });
  function fn(deadline: Deadline) {
    console.log("deadline", deadline);
    while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && tasks.length > 0) {
      tasks.shift()();
    }
    if (tasks.length > 0) {
      requestIdleCallback(fn1);
    }
  }

  // 封装后的场景 更加简短方便
  const stop = useRic(tasks, 1000)
 */

useRaf

包裹了 requestAnimationFrame 和 cancelAnimationFrame 的封装函数
兼容了浏览器的不同版本
简化了调用方式

/**
 * @func useRaf
 * @desc 📝 打印
 * @param { Function } fn 待执行的函数
 * @param { number } timeout 超时时间(单位:毫秒)
 * @param { Boolean } autoStop 执行一次后停止动画
 * @return { () => void } 停止函数
 * @example
  import { useRaf } from 'lazy-js-utils'

  const count = ref(0)
  // 封装前的场景
  const animationId = requestAnimationFrame(fn)

  function fn(timestamp) {
    if (start === null) {
      start = timestamp
    }
    else {
      const delta = timestamp - start
      if (delta > 1000) {
        count.value++
        if (count.value > 10) {
          cancelAnimationFrame(animationId)
        }
      }
    }
    requestAnimationFrame(fn)
  }
  // 封装后的场景 更加简短方便
  const stop = useRaf(() => {
    count.value++
    if (count.value > 10) {
      stop()
    }
  }，1000)
 */

fileSplice

大文件切片处理函数

/**
 * @func fileSplice
 * @desc 📝 打印
 * @param { File } file 文件对象
 * @param { number } size 切片大小(单位:字节) = 100kb // 切片的数量超过100就设定最大切片数量为100,大小为 File.size / 100
 * @return { Array } 切片数组
 * @example
  import { fileSplice } from 'lazy-js-utils'

  fileSplice(file: File, chunkSize: number = 1024 * 100)
  const chunks = fileSplice(file, 1024 * 1024) // [ { file: Blob, filename: string } ]
 */

memorizeFn

根据参数返回一个能缓存结果的函数

/**
 * @func memorizeFn
 * @desc 📝 根据参数返回一个能缓存结果的函数
 * @param { Function } fn 待缓存的函数
 * @return { Function }
 * @example
  import { memorizeFn } from 'lazy-js-utils'

  let count = 0
  const fn = memorizeFn(()=> count++)
  fn()
  fn()
  console.log(count) // => 1
 */

debounce

函数防抖

/**
 * @func debounce
 * @desc 📝 函数防抖
 * @param { Function } fn 待防抖的函数
 * @param { number } delay 延迟时间
 * @return { Function }
 * @example
  import { debounce } from 'lazy-js-utils'

  const f = debounce(() => {
  console.log('debounce')
}, 1000)
 */

throttle

函数节流

/**
 * @func throttle
 * @desc 📝 函数节流
 * @param { Function } fn 待节流的函数
 * @param { number } delay 延迟时间
 * @return { Function }
 * @example
  import { throttle } from 'lazy-js-utils'

  const f = throttle(() => {
    console.log('throttle')
  }, 1000)
 */

preload

预加载图片或视频

/**
 * @func preload
 * @desc 📝 预加载图片或视频
 * @param { string[] | string } list 预加载的资源列表
 * @param { string } style 可额外注入的样式
 * @return { (HTMLImageElement | HTMLVideoElement)[] } result 预加载的资源列表
 * @example
  import { preload } from 'lazy-js-utils'

  const imageAssets = [
    'https://img.alicdn.com/imgextra/i3/O1CN01QX0Z2Y1JZQ5Z5Z5ZT_!!6000000000001-2-tps-750-750.png',
    'https://img.alicdn.com/imgextra/i3/O1CN01QX0Z2Y1JZQ5Z5Z5ZT_!!6000000000001-2-tps-750-750.png',
  ]
  preload(imageAssets)
 */

lazyLoad

自动懒加载图片或视频

/**
 * @func lazyLoad
 * @desc 📝 自动懒加载图片或视频
 * @param { string | HTMLElement } element 需要懒加载的元素的父容器
 * @param { string } loadingUrl 自定义加载中的图片
 * @return { void }
 * @example
  import { lazyLoad } from 'lazy-js-utils'

  // app下的图片或视频会自动根据是否可见懒加载
  lazyLoad(document.getElementById('app'))
*/

once

只执行一次的函数

/**
 * @func once
 * @desc 📝 只执行一次的函数
 * @param { Function } fn 待执行一次的函数
 * @return { Function }
 * @example
  import { once } from 'lazy-js-utils'

  document.addEventListener('click', once(() => {
    console.log('click')
  }))
  document.click() // click
  document.click() //
 */

getLru

删除最近最少使用的缓存

/**
 * @func getLru
 * @desc 📝 删除最近最少使用的缓存
 * @param { number } max 最大缓存数量
 * @return {
 *  get,
 *  set,
 *  max,
 *  size,
 *  cache,
 *  }
 * @example
  import { getLru } from 'lazy-js-utils'

  const lru = getLru(3)
  lru.set('a', 1)
  lru.set('b', 2)
  lru.set('c', 3)
  lru.set('d', 4)
  console.log(lru.cache) // => { 'b' => 2, 'c' => 3, 'd' => 4 }
*/