useThrottle

Introduction

节流函数

Basic Usage

import { useThrottle } from '@flypeng/tool/browser';
const throttleFunction = useThrottle(() => {}, 1000);

Online Demo

useThrottle

节流函数：屏幕滚动事件示例

<script lang="ts" setup>
import { useThrottle } from '@flypeng/tool/browser';
import { ref, onMounted } from 'vue';
const getScrollTop = () => window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
const scrollTop = ref<number | null>(getScrollTop());
const consoleScrollTop = () => {
  scrollTop.value = getScrollTop();
  console.log('节流函数执行了', scrollTop.value);
};
const scrollFunction = useThrottle(consoleScrollTop, 1000);
onMounted(() => {
  window.addEventListener('scroll', scrollFunction);
});
</script>

<template>
  <div>当前屏幕滚动高度：{{ scrollTop }}</div>
</template>

Type Declaration

/**
 * 节流函数
 * @param callback
 * @param delay
 */
declare function useThrottle(callback: Function, delay: number): () => void;