Question

我目前正在寻找一个有趣的＆＃39;在某些特殊情况下，我的函数和变量被删除范围/错误的问题。特别是CheckComplete函数。

以下代码完全正常，没有任何错误：

// JavaScript Document
"use strict"

$(document).ready(function() {

    var buttonsClicked = new Array();

    $(".screen .button-container > div").each(function(){
        buttonsClicked.push(false);
    });
    $(".screen .button-container > div").click(function(){
        $(".screen .information-container > div").toggleClass("hidden",true);
        $(".screen .information-container > div:eq("+$(this).index()+")").toggleClass("hidden",false);
        buttonsClicked[$(this).index()] = true;
        CheckComplete();
    });

    function CheckComplete()
    {
        var complete = true;
        for(var i = 0; i < buttonsClicked.length; i++)
        {
            if(!buttonsClicked[i])
            {
                complete = false;
                break;
            }
        }

        if(complete)
        {
            Navigation.SetNextScreen("menu");
        }
    }
});

然而，当我将CheckComplete声明的$(document).ready(){})函数放在之外时，会出现最奇怪的问题。像这样：

   // JavaScript Document
"use strict"

var buttonsClicked;

$(document).ready(function() {

    buttonsClicked = new Array();

    $(".screen .button-container > div").each(function(){
        buttonsClicked.push(false);
    });
    $(".screen .button-container > div").click(function(){
        $(".screen .information-container > div").toggleClass("hidden",true);
        $(".screen .information-container > div:eq("+$(this).index()+")").toggleClass("hidden",false);
        buttonsClicked[$(this).index()] = true;
        CheckComplete();
    });
}); 


function CheckComplete()
    {
        var complete = true;
        for(var i = 0; i < buttonsClicked.length; i++)
        {
            if(!buttonsClicked[i])
            {
                complete = false;
                break;
            }
        }

        if(complete)
        {
            Navigation.SetNextScreen("menu");
        }
    }

第一次我加载页面，这完全正常。但是，当我按F5或通过按钮刷新页面时。调用CheckComplete()时收到以下错误：ReferenceError: assignment to undeclared variable buttonsClicked。此后，无论页面刷新多少次，都会继续出错。这只能在关闭选项卡/窗口并重新访问页面时解决。

此脚本在运行时动态加载，但是当脚本中的其他所有内容都工作且我已完全禁用缓存时，我很难看到这会如何影响功能。使我的困惑更加复杂，这只发生在Firefox ......？

如果有人可以请说明为什么会出现这种情况会很好，因为在$(document).ready(){}中定义我的所有功能并不能安抚我的完美主义，我不会考虑它语法正确。

更新

@SandeepNayak是正确的，＆＃34;使用严格＆＃34;声明是罪魁祸首...我很困惑为什么这会在Firefox中造成这样的问题，而不是其他的??????

Answer 1

如果是我，Id会完全丢失全局变量buttonsClicked并使用以下数据属性执行此操作：

  // JavaScript Document
  "use strict"

  $(document).ready(function() {
    var $btns=$(".screen .button-container > div");
    $btns.click(function() {
      var $this =$(this);
      var cur=$btns.index($this);
      var $containers=$(".screen .information-container > div");
      $containers.removeClass("hidden").eq(cur).addClass("hidden");
      $this.attr('data-clicked','true'); // set btn to "clicked"
      CheckComplete();
    });
  });
  
  function CheckComplete() {
    var btns=$(".screen .button-container > div").length; // count btns
    var clickedBtns=$('[data-clicked="true"]').length; // count clicked btns
    if (btns==clickedBtns) alert('passed check'); // compare counts
  }

.screen .button-container > div{
  padding:10px;
  width:auto;
  background-color:#eee;
  margin-bottom:15px;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="screen">
  <div class="button-container">
    <div data-clicked="false">Test button</div>
    <div data-clicked="false">Test button</div>
    <div data-clicked="false">Test button</div>
  </div>
</div>

Answer 2

将整个脚本包装在匿名函数中解决了这个问题。

这可能与警告有关：＆＃34;使用“use strict”的功能形式 - 仍在调查根本原因，但至少那些有相同问题的人可以实施以下是平均时间。

(function() {
    "use strict";

    var buttonsClicked;

    $(document).ready(function() {

      buttonsClicked = new Array();

      $(".screen .button-container > div").each(function() {
        buttonsClicked.push(false);
      });
      $(".screen .button-container > div").click(function() {
        $(".screen .information-container > div").toggleClass("hidden", true);
        $(".screen .information-container > div:eq(" + $(this).index() + ")").toggleClass("hidden", false);
        buttonsClicked[$(this).index()] = true;
        CheckComplete();
      });
    });


    function CheckComplete() {
      var complete = true;
      for (var i = 0; i < buttonsClicked.length; i++) {
        if (!buttonsClicked[i]) {
          complete = false;
          break;
        }
      }

      if (complete) {
        Navigation.SetNextScreen("menu");
      }
 })();

Javascript / Jquery变量范围问题

更新

2 个答案: