0

我有一个数组（拼接到大小 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);
    });
4

2 回答 2

2

字符串是字符串，数组是数组，即使在 console.log 中也是如此，所以在执行以下操作时：

console.log('clicksInfo', clicksInfo);

那是一个字符串，一个逗号，然后是一个数组？

尝试做：

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

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

console.log(clicksInfo);
于 2012-10-15T18:56:06.700 回答
0

您面临的问题是发生的事件不能保证按特定顺序执行。可以先执行任一单击处理程序，但在大多数浏览器中，您的#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 在这里。

于 2012-10-15T19:11:57.727 回答