如何实现按钮点击停止服务器端runScript函数的循环与数据抓取

现有代码 #

HTML文件 #

<script>
    let socket = io();
    socket.on('update-value', function (value) {
            console.log('received new value', value);
          $('#div1').prepend(value);
        });
        socket.on('checking-value', function (value) {
            console.log('received new value', value);
            $('#name').prepend(value);
        });

        function searchStart() {
            socket.emit('searchStart')
            const startBtn = document.querySelector('#startbtn')
            const stopBtn = document.querySelector('#stopbtn')
            startBtn.disabled = true
            stopBtn.disabled = false
        }

        function searchStop() {
            socket.emit('searchStop')
            const startBtn = document.querySelector('#startbtn')
            const stopBtn = document.querySelector('#stopbtn')
            stopBtn.disabled = true
            startBtn.disabled = false
        }
</script> 

服务器端JS文件 #

// 全局状态标记：控制抓取任务是否继续
let isTaskRunning = false;

socket.on("searchStart", () => {
  isTaskRunning = true;
  runScript();
})

socket.on("searchStop", () => {
  isTaskRunning = false;
})

// 修改后的runScript函数，加入状态检查
async function runScript() {
  // 适配你原有的循环抓取逻辑
  while (isTaskRunning) {
    try {
      // 替换成你实际的数据抓取代码
      const fetchedData = await yourDataFetchFunction();
      
      // 推送数据到前端
      socket.emit('update-value', fetchedData);
      
      // 可选：添加延迟避免高频请求
      await new Promise(resolve => setTimeout(resolve, 800));
    } catch (error) {
      console.error('抓取数据失败:', error);
      // 出错时仍检查状态，防止死循环
      if (!isTaskRunning) break;
    }
  }
}

需求说明 #

runScript函数包含持续循环的逻辑，会不断抓取数据并推送到前端页面展示。需要实现停止按钮功能，能终止服务器端runScript的所有循环与数据抓取操作，再次点击开始按钮可恢复任务运行。

实现思路 #

1. 状态标记控制循环：用全局变量isTaskRunning作为开关，runScript的循环每轮都会检查这个变量，一旦变为false就终止循环。
2. 异步循环适配：如果你的抓取逻辑是异步的（比如用await请求数据），要确保每次循环迭代都能检测到状态变化，避免出现“循环启动后无法停止”的情况。
3. 按钮状态同步：前端点击按钮后同步禁用/启用对应按钮，防止重复触发开始/停止操作。
4. 事件响应逻辑：服务器端监听searchStart时启动任务并置状态为true；监听searchStop时直接置状态为false，让runScript自行终止。

内容的提问来源于stack exchange，提问作者nasser aldosry