动态导入数据后绑定地图moveend事件处理函数导致页面严重卡顿

兄弟，我来帮你拆解下这个问题的可能原因和解决思路：

首先排查最可能的递归触发点 #

你提到控制台出现“too much recursion”，这大概率是**updateFiltering函数内部间接触发了地图的视图变化**——比如不小心调用了map.setView()、panTo()、zoomTo()这类方法，或者某个子操作修改了地图状态，导致moveend事件再次触发，形成循环调用：moveend → updateFiltering → 地图变化 → moveend → ...，无限递归下去自然会卡死页面。

先仔细检查updateFiltering的代码，把所有可能影响地图视图的逻辑去掉，或者加个判断避免在视图更新时触发过滤。

给moveend事件加防抖处理 #

哪怕没有递归，moveend事件的触发频率其实比你想象的高——比如拖拽地图时，每次松手都会触发一次，快速连续拖拽的话会多次调用updateFiltering，而每次处理几百个标记的过滤逻辑，很容易造成主线程阻塞。

给你的过滤函数加个防抖，确保短时间内只执行一次：

// 先写一个通用的防抖工具函数
function debounce(func, delay = 300) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 在你的import回调里使用防抖后的函数
import('./data-'+lang+'.js')
  .then((langdata) => {
    // ... 你的其他代码 ...
    const points = langdata.points;
    // 包装防抖后的过滤函数
    const debouncedUpdate = debounce(() => updateFiltering(points));
    
    map.on('moveend', () => {
      debouncedUpdate();
    });
  })
  .catch((error) => {
    console.error(error);
  });

检查是否重复绑定事件 #

如果用户切换语言时会重新执行这段动态导入代码，那每次都会给map新增一个moveend监听——几次切换后，一次地图移动就会触发N次updateFiltering，性能自然雪崩。

解决办法是用命名函数绑定，每次绑定前先移除旧的监听：

import('./data-'+lang+'.js')
  .then((langdata) => {
    // ... 你的其他代码 ...
    const points = langdata.points;
    const debouncedUpdate = debounce(() => updateFiltering(points));
    
    // 定义命名的事件处理函数
    function handleMapMoveEnd() {
      debouncedUpdate();
    }
    
    // 先移除旧的监听，再绑定新的
    map.off('moveend', handleMapMoveEnd);
    map.on('moveend', handleMapMoveEnd);
  })
  .catch((error) => {
    console.error(error);
  });

优化updateFiltering的内部逻辑 #

最后，看看updateFiltering本身能不能优化：

• 不要每次都遍历所有几百个标记，而是用map.getBounds()先获取当前视野范围，只过滤在视野内的标记（用bounds.contains(marker.getLatLng())判断）
• 如果是更新HTML列表，尽量用文档片段（DocumentFragment）一次性插入DOM，避免频繁的DOM操作
• 提前把标记和对应的列表项做关联，不用每次过滤都重新生成所有DOM元素

备注：内容来源于stack exchange，提问作者Anna Kleiner