手写一个节流函数（处理滚动加载）vue3

// 节流函数
export  const throttle = (func, delay) => {
  let lastCall = 0;
  
  return function(...args) {
    const now = Date.now();
    if (now - lastCall < delay) return;
    lastCall = now;
    func(...args);
  };
}

import { throttle } from '../../../utils/dataLoader.js';

 const dataList = ref([]);
    const isLoading = ref(false);
    let currentPage = 1; // 当前页数
    const pageSize = 10; // 每页加载的数据条数

    // 加载数据函数（模拟加载数据）
    const loadData = () => {
      isLoading.value = true;
      // 模拟异步加载数据
      setTimeout(() => {
        // 模拟从接口获取数据
        const newData = [];
        for (let i = 0; i < pageSize; i++) {
          const dataIndex = (currentPage - 1) * pageSize + i;
          if (dataIndex < 1000) {
            newData.push({ id: dataIndex + 1, text: 'Data ' + (dataIndex + 1) });
          }
        }
        dataList.value = [...dataList.value, ...newData];
        isLoading.value = false;
        currentPage++; // 更新当前页数
      }, 1000);
    };
    // 页面加载时执行加载数据函数，加载初始的十条数据 , 在组件挂载后监听滚动事件
    onMounted(() => {
      // 加载十条初始数据
      for (let i = 0; i < 10; i++) {
        dataList.value.push({ id: i + 1, text: 'Data ' + (i + 1) });
      }
      window.addEventListener('scroll', handleScroll);
    });
    // 在组件卸载时移除滚动事件监听器
    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll);
    });
     
    const throttledLoadData = throttle(loadData, 1000);
    // 页面滚动时加载更多数据
    const handleScroll = () => {
      const scrollHeight = document.documentElement.scrollHeight;
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      const clientHeight = document.documentElement.clientHeight;
      if (scrollHeight - scrollTop === clientHeight && !isLoading.value) {
        throttledLoadData(); // 滚动到底部时加载更多数据
      }
    };