HERE Maps API函数输出次数过多，如何限制每10秒仅执行一次

问题根因 #

现有代码每次触发mapviewchange事件都会新增独立的setTimeout定时器，未清理历史定时器，导致10秒后所有注册的定时器集中执行，最终出现多次输出坐标的问题。

最优解决方案（防抖模式） #

该方案仅在停止操作地图10秒后执行一次函数，取最终的视图状态，完全避免多余请求，15分钟最多调用90次，符合限流要求：

// 存储定时器ID
let mapChangeTimer = null;

function getMapCorners() {
  const mapView = map.getViewModel();
  // 推荐使用官方公开API获取边界，避免私有属性随版本迭代失效
  const bounds = mapView.getLookAtData().bounds.getBoundingBox();
  // 如需适配原有坐标取值逻辑可保留原写法，官方写法兼容性更强
  const corners = [
    bounds.getMinLng(), 
    bounds.getMinLat(), 
    bounds.getMaxLng(), 
    bounds.getMaxLat()
  ];
  console.log(corners);
  // 此处补充调用标记生成API的逻辑
}

map.addEventListener("mapviewchange", function () {
  // 每次触发事件先清空未执行的旧定时器
  if (mapChangeTimer) {
    clearTimeout(mapChangeTimer);
  }
  // 重新注册10秒后执行的新定时器
  mapChangeTimer = setTimeout(getMapCorners, 10000);
});

实现原理 #

每次地图视图变化时都会重置计时，只有连续10秒没有新的视图变更时才会执行函数，拿到的永远是最后一次操作后的最终视图坐标，不会出现多次执行的问题。

可选方案（严格间隔节流模式） #

如果需要持续操作地图时每10秒也能拿到最新的视图状态，可以用该方案，严格保证最多每10秒执行一次：

let mapChangeTimer = null;
let lastExecTime = 0;
const REQUEST_INTERVAL = 10000; // 10秒间隔

function getMapCorners() {
  lastExecTime = Date.now();
  const mapView = map.getViewModel();
  const bounds = mapView.getLookAtData().bounds.getBoundingBox();
  const corners = [
    bounds.getMinLng(), 
    bounds.getMinLat(), 
    bounds.getMaxLng(), 
    bounds.getMaxLat()
  ];
  console.log(corners);
  // 此处补充调用标记生成API的逻辑
}

map.addEventListener("mapviewchange", function () {
  const now = Date.now();
  // 距离上次执行超过10秒则直接执行
  if (now - lastExecTime >= REQUEST_INTERVAL) {
    getMapCorners();
    if (mapChangeTimer) clearTimeout(mapChangeTimer);
  } else {
    // 未到间隔则重置定时器，到时间后执行最新的状态
    if (mapChangeTimer) clearTimeout(mapChangeTimer);
    mapChangeTimer = setTimeout(getMapCorners, REQUEST_INTERVAL - (now - lastExecTime));
  }
});

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