有没有好用的vue3的轮询hook？

AI BotBETA

是的，有好用的 Vue 3 轮询 Hook。

你可以使用像 usePoll 这样的自定义 Composition API Hook 来实现轮询功能。以下是一个简单的示例，展示了如何创建一个轮询 Hook：

import { ref, onUnmounted } from 'vue';

export function usePoll(callback, interval = 1000) {
  const timer = ref(null);

  const startPolling = () => {
    timer.value = setInterval(callback, interval);
  };

  const stopPolling = () => {
    if (timer.value !== null) {
      clearInterval(timer.value);
      timer.value = null;
    }
  };

  onUnmounted(stopPolling);

  startPolling();

  return stopPolling;
}

你可以在你的组件中这样使用这个 Hook：

<template>
  <div>
    <!-- 你的模板内容 -->
  </div>
</template>

<script>
import { usePoll } from './hooks/usePoll'; // 假设你把 usePoll 放在 hooks 文件夹中

export default {
  setup() {
    usePoll(() => {
      // 这里是你想要轮询执行的代码
      console.log('Polling...');
    }, 5000); // 每5秒执行一次

    return {};
  },
};
</script>

这个 usePoll Hook 允许你指定一个回调函数和一个轮询间隔（以毫秒为单位）。它会在组件挂载时开始轮询，并在组件卸载时停止轮询。

3 个回答

得票最新

Seven

1.2k127

发布于
12 月 17 日广东

更新于
12 月 17 日

我写一个给你参考一下
适用于 Vue 3 的轮询 Hook，可以在多个组件中复用。这个 Hook 会在页面可见时进行轮询，当页面不可见时暂停轮询，以减少不必要的请求。

import { ref, onMounted, onUnmounted } from 'vue';

/**
 * 轮询封装 Hook
 * @param {Function[]} pollFunctions 需要轮询的函数数组
 * @param {number} pollingInterval 轮询时间间隔（毫秒）
 * @param {number} pauseThreshold 当离开页面多少秒后就不再执行，回到页面立即调用轮询函数
 * @returns {{ startPolling: Function, stopPolling: Function }}
 */
export function useVisibilityPolling(pollFunctions, pollingInterval = 30000, pauseThreshold = 15000) {
  const pollingTimer = ref(null);
  const visibilityPauseTimer = ref(null);
  const lastVisibleTime = ref(null);

  const startOrResumePolling = () => {
    if (pollingTimer.value) return;
    pollingTimer.value = setInterval(() => {
      pollFunctions.forEach(pollFunction => pollFunction());
    }, pollingInterval);
  };

  const stopPolling = () => {
    if (pollingTimer.value) {
      clearInterval(pollingTimer.value);
      pollingTimer.value = null;
    }
  };

  const pausePolling = () => {
    visibilityPauseTimer.value = setTimeout(() => {
      stopPolling();
      lastVisibleTime.value = null;
    }, pauseThreshold);
  };

  const resumePolling = () => {
    clearTimeout(visibilityPauseTimer.value);
    visibilityPauseTimer.value = null;
    if (lastVisibleTime.value && (new Date() - lastVisibleTime.value) < pauseThreshold) {
      startOrResumePolling();
    } else {
      pollFunctions.forEach(pollFunction => pollFunction());
      startOrResumePolling();
    }
    lastVisibleTime.value = new Date();
  };

  const handleVisibilityChange = () => {
    if (document.visibilityState === 'visible') {
      resumePolling();
    } else {
      pausePolling();
      lastVisibleTime.value = new Date();
    }
  };

  const startPolling = () => {
    window.addEventListener('visibilitychange', handleVisibilityChange);
    startOrResumePolling();
  };

  onMounted(startPolling);
  onUnmounted(() => {
    stopPolling();
    window.removeEventListener('visibilitychange', handleVisibilityChange);
  });

  return { startPolling, stopPolling };
}

在组件中使用，例如：

import { useVisibilityPolling } from './path/to/your/hook';

export default {
  setup() {
    const fetchData = async () => {
      // 你的请求逻辑
    };

    const { startPolling, stopPolling } = useVisibilityPolling([fetchData], 10000, 15000);

    return { startPolling, stopPolling };
  }
};