时间戳

首页 > 解决方案 > javascript/jquery clearInterval 有效但有延迟

javascript - javascript/jquery clearInterval 有效但有延迟

问题描述

我有一个运行服务器端的烧瓶环境，它计算它的当前位置（连接到服务器的 GPS 模块）和给定坐标之间的距离。我希望在发生特定事件时更新文本。它应该不断更新，直到发生不同的事件。

这是我更新距离的功能：

function getDistToCurPos(lat, lon) {
        $.getJSON('/getDistFromCurPosToPoint', {
        pLat: lat, 
        pLon: lon,
      },
      function(data){
        dist = data;
        let distStr = String(dist);
        let outStr = '<div class="distanceOutput"> Distance: '.concat(distStr).concat("</div>");
        $( "div.distanceOutput" ).replaceWith( outStr );
        });
};

当开始事件发生时，我按如下方式调用函数（示例值 38 和 9）：

distRefreshID = setInterval(function() { getDistToCurPos(38,9); }, distUpdateTime);

distUpdateTime设置为 500。服务器响应平均需要 15 毫秒。

文本的初始状态：

<div class="distanceOutput">Inactive !</div>

为了终止更新文本，当发生不同的事件时，我调用以下命令：

if ( distRefreshID !== 0) {
   clearInterval(distRefreshID);
   $( "div.distanceOutput" ).replaceWith('<div class="distanceOutput">Inactive again!</div>');
   distRefreshID = 0;
}

该代码通常有效。但是当停止事件发生时，我看到“再次无效！” 只是片刻。之后，文本会持续更新几秒钟的当前值。

任何提示，我的错误在哪里？

标签： javascriptjqueryflask

解决方案

setInterval 最初不会调用该函数，它会调用它afterx 毫秒，因此如果您想立即更新内容，请在设置间隔之前调用该函数

getDistToCurPos(38,9);
distRefreshID = setInterval(function() { getDistToCurPos(38,9); }, distUpdateTime);

推荐阅读