JavaScript实现地图事件防抖：仅处理最后一次触发事件

嘿，这个场景其实挺常见的，咱们用**防抖（debounce）**的思路就能完美解决！你之前用setInterval的方向不对哦，它是用来重复执行任务的，而咱们需要的是「延迟执行一次，中途触发就重置计时」，所以换成setTimeout结合定时器清除来实现就对了：

首先，咱们需要一个变量来保存定时器的ID，确保每次触发事件时都能取消之前还没执行的调用：

// 声明一个变量存储定时器ID，放在全局/函数作用域里确保能被访问到
let debounceTimer;

function doStuff() {
  // 每次触发事件时，先清除之前未执行的定时器
  clearTimeout(debounceTimer);
  
  // 重新设置新的定时器，2秒后执行实际业务逻辑
  debounceTimer = setTimeout(function() {
    // 这里写你真正要处理的内容
    console.log('只执行最后一次事件触发的逻辑');
    // do some stuff here...
  }, 2000);
}

myMap.on('dragend', doStuff);
myMap.on('zoomend', doStuff);

原理说明： #

• 每次触发dragend或zoomend事件时，都会先调用clearTimeout(debounceTimer)，把之前还没到时间的定时器直接取消；
• 然后重新创建一个新的2秒定时器，只有当最后一次触发事件后，2秒内没有新的事件触发，这个定时器才会执行里面的业务逻辑；
• 这样不管你连续触发多少次事件，最终只会处理最后一次触发的请求，完全符合你的需求。

如果之后你需要在其他场景复用这个防抖逻辑，还可以把它封装成一个通用函数：

function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  };
}

// 使用的时候直接包装你的业务函数
const debouncedDoStuff = debounce(function() {
  // do some stuff here...
}, 2000);

myMap.on('dragend', debouncedDoStuff);
myMap.on('zoomend', debouncedDoStuff);

这样封装后，其他需要防抖的场景也能直接复用，灵活性更高～

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