在IE浏览器中，只有在打开开发工具后JavaScript才能正常工作 - 与控制台无关？

Question

我正在尝试解决一个奇怪的JavaScript问题：这个脚本在所有浏览器中都工作得很好，但在IE中不起作用，只有在打开开发工具后才能正常运行。

我搜索了一下，发现这通常是由于IE没有生成控制台对象造成的。然而，在代码中没有提到控制台，并且我尝试了5种以上的不同代码来解决这个问题，但都没有成功。

希望能得到一些帮助，解决这个问题！

代码：

var slide = function slider() {
    var i = 0;
    var slider = {
      loop: function loop(data) {
        $.getJSON('?getdata=1', function(data) {
          var create = $('<div class="social-area pic">' + '<div class="socimgdiv">' + '<img class="socimg" src="' + data.pic + '">' + '<div class="infotxt">' + data.name + '<br><small>' + data.age + ', ' + data.country + '</small><br>' + '</div></div></div>'),
            maxTimeout = 4000,
            minimumTimeout = 1000;
          $('#box').prepend(create);
          $('.social-area').last().fadeOut(400);
          setTimeout(function() {
            $('.social-area').last().remove();
          }, 400);
          setTimeout(function() {
            $('.pic').animate({
              width: 'toggle'
            }, 350).removeClass('pic');
          }, 400);
          i += 1;
          if (i >= 5) {
            timeouter = Math.floor(Math.random() * maxTimeout);
            if (timeouter <= minimumTimeout) timeouter = minimumTimeout;
          } else timeouter = 400;
          setTimeout(function() {
            this.loop();
          }.bind(slider), timeouter);
        });
      }
    };
    slider.loop();
  };
slide();

该脚本从先前包含的PHP脚本生成的JSON源中收集数据。

if(isset($_GET['getdata'])){
  echo json_encode(array(
  'name' => $name,
  'gender' => $gender,
  'age' => $age,
  'country' => $mycountry,
  'pic' => $pic
)); exit;
}

这一切在FF、Chrome、Safari和Opera中都很好地运作 - 但是在未打开开发者工具的IE 11中却不行。

可能有一些调用或函数在生成控制台对象之前就无法正常工作，但我不知道是什么！

- David

---

你尝试过哪些控制台解决方法？这可能是一个时间问题。你的DOM生成与等待和回调混合在一起，这会导致IE出现奇怪的问题（至少是旧版本）。不幸的是，由于它是IE，你可能不得不删除代码行，直到确定哪一行是有问题的。我会从HTML生成开始。另一个选择是使用异常处理和警报，因为使用开发工具不是一个选项。 - Blue

为了证明这不是控制台相关的问题，请在脚本顶部添加以下内容，看看是否可以在IE中开始工作：if (typeof console == 'undefined') {console = {}}; if (!console.log) {console.log = function (){}}; - slebetman

@Blue 我尝试了大约六种不同的方法，都类似于slebetman发布的那个 - 我将它们放在这段代码上面（无论是在它们自己的脚本标签中还是在当前脚本上面），以便在有问题的脚本尝试执行之前检查控制台对象。我不熟悉JS调试 - 你能提供更多信息或链接，让我能够弄清楚如何使用异常处理进行调试，而不必打开开发工具吗？ - David

异常处理在这里解释：http://www.w3schools.com/js/js_errors.asp。调试更加困难，特别是因为您无法使用开发工具。您可以先将所有内容放入try catch中，然后警告或打印异常到元素。我还会在关键点和退出点放置某种打印。这样，您就知道哪些部分正在正确执行，以及是否有任何异常。要打印到元素，您可以抓取页面上的某些内容并使用dom write，甚至打开一个完全专用于调试的新窗口。 - Blue

为了打开一个调试窗口，您可以运行以下代码（请注意弹出窗口阻止）：var debugger = window.open(); debugger.document.write("<div>我抛出了一个错误!!!</div>")。 - Blue

好的，所以我基本上在代码中的每个部分都使用了try{real code} catch(error){alert box}，即每个函数。我没有错误，但是如果我将try/catch功能添加到其中一部分-第4行。如果我例如输入var slider = try{{loop: function .....}或者替代输入var slider = {loop: try{.....}那么整个内容就会停止工作-但是catch不会生成错误！这就是我的限度-链接 - David

Answer 1

这是因为在通过 AJAX 请求请求外部文件时，打开开发人员控制台会暂时禁用 IE 11 的缓存机制。通过添加简单的时间戳来解决这个问题，使请求始终看起来是新鲜的：

$.getJSON('?getdata=1&timestamp='+$.now(), function(data) {

你问为什么要这样做？我也不知道。也许与jQuery有关。

- subZero

---

是的，可以确认这就是需要的修复！ - David