Question

我有一个数组（拼接到2号），可以跟踪用户点击的内容（第一个，最后一个）。第一个和最后一个元素是唯一的。

我正在尝试根据用户点击的内容加载内容。发生的奇怪事情是我没有看到更新的数组，除非我做2个console.logs。如果完成1个日志，则阵列不会更新。我猜这与数组执行/操作时间有关。

我调试的方式是单击处理程序来记录并单击以查看数组值。有什么建议或提示吗？

我之前从未遇到过这个问题。感谢。

    var clicksInfo = [];

    $('#a, #b, #c').on('click', function(e){

    // array: add, splice
    if(jQuery.inArray($(this).attr('id'), clicksInfo) == -1){
        clicksInfo.push($(this).attr('id'));
        if(clicksInfo.length == 2){
          //  might do something
        }else if(clicksInfo.length == 3){
          clicksInfo.splice(0,1);
        }
      }else{
        clicksInfo.splice(0,1);
        clicksInfo.push($(this).attr('id'));      
      }

      if($(this).attr('id') == 'a'){
        //  do stuff.
      }else if($(this).attr('id') == 'b'){  
        //  do stuff.
      }else if($(this).attr('id') == 'c'){
        //  do stuff.
      }
    });


    $(document).on('click', function(){
      console.log('clicksInfo', clicksInfo);
      // console.log('clicksInfo', clicksInfo);
    });

Answer 1

字符串是字符串，数组是数组，甚至在console.log中，所以在执行时：

console.log('clicksInfo', clicksInfo);

那是一个字符串，一个逗号，还有一个数组？

尝试做：

console.log('clicksInfo : '+ clicksInfo);

显示字符串表示，或者将数组显示为对象，不要将其与其他奇怪性混合：

console.log(clicksInfo);

Answer 2

您遇到的问题是发生的事件无法保证按特定顺序执行。可以先执行click handler，但在大多数浏览器中，＃a，＃b，#c的处理程序将首先执行。

虽然您可以尝试使用setTimeout等待足够长的时间来同步数据，但您的代码很可能会破坏。

如果你想在两种情况下处理点击，我的建议是删除＃a，＃b和#c的处理程序。仅使用文档单击处理程序，传入事件声明，然后检查处理程序中单击元素的ID以调用第一个代码。然后，在第二个代码块运行之前，您可以保证更新数据。像这样：

var clicksInfo = [];

$(document).on('click', function(e){

    if (e.target.id === "a" || e.target.id === "b" || e.target.id === "c") {
        // array: add, splice
        if (jQuery.inArray(e.target.id, clicksInfo) == -1){
            clicksInfo.push(e.target.id);
            if(clicksInfo.length == 2){
                 //  might do something
            } else if(clicksInfo.length == 3){
                clicksInfo.splice(0,1);
            }
        } else {
             clicksInfo.splice(0,1);
             clicksInfo.push(e.target.id);
        }

      if(e.target.id === 'a'){
        //  do stuff.
      }else if(e.target.id === 'b'){  
        //  do stuff.
      }else if(e.target.id === 'c'){
        //  do stuff.
      }
    }

    console.log('clicksInfo', clicksInfo);
});

JSFiddle here

数组值不正确

2 个答案: