jquery - 不同元素相同事件(两个异步结果而不是一个)

Question

当您需要处理具有相同事件的两个元素时，这是一个经典问题，但在这种情况下它会变得困惑。我正在使用 leaflet.js 但会使代码更加通用

空的 var 声明:

var markerslayer;

第一个绑定(bind)事件:

$("#slider").on("valuesChanged", function (e){

      var markers = new Array();
      //check if empty, otherwise resets layer
      if(markerslayer){
         map.removeLayer(markerslayer);
         };

      /*some more code here */
      $.post (a.php file here, {some data}, function(data){
             /* markerslayer array is made here */      
             /* add a layer based on markerslayer array */
             });
      });

第二个绑定(bind)事件(内部代码与上面相同):

map.on("moveend", function (e){
      
      var markers = new Array();
      //check if empty, otherwise resets layer
      if(markerslayer){
         map.removeLayer(markerslayer);
         };

      /*some more code here */
      $.post (a.php file here, {some data}, function(data){
             /* markerslayer array is made here */      
             /* add a layer based on markerslayer array */
             });
      });

现在，因为我认为它们在我第一次运行脚本时都是异步的，所以它们同时运行，并且创建两个 /* 基于标记层数组制作一些 div */ 虽然我在开头有 if 。

简而言之(我认为)发生的事情是:

1. 我创建一个空变量
2. 它们异步运行，因此将其视为空
3. 他们创建了两个结果而不是一个结果
4. 附加:当它们再次被触发时，每个都只会重置自己的结果(就像有一个markerslayer和一个markerslayer_copy)。

Answer 1

问题是您在调用 post 之前检查 markerslayer 是否存在，这意味着另一个 post 可以返回并同时创建它:

要解决此问题，请将删除代码移至 post 回调中:

$.post (a.php file here, {some data}, function(data){
    if(markerslayer){
        map.removeLayer(markerslayer);
    };
    /* markerslayer array is made here */  
    /* add a layer based on markerslayer array */   
});

这样，每个帖子都会在回调中接收数据，然后在添加新图层之前立即删除任何现有图层。

注意:这也意味着您不需要(必要地 - 取决于代码的其余部分)需要在回调之外保留对标记数组的引用。