Internet Explorer 10 + 11 中的 JavaScript 函数语法错误答案

【问题标题】：JavaScript function syntax error in Internet Explorer 10 + 11Internet Explorer 10 + 11 中的 JavaScript 函数语法错误
【发布时间】：2017-08-23 08:51:57
【问题描述】：

我正在使用这个脚本来显示/隐藏一些 div。它在除 Internet Explorer 10+11 之外的所有浏览器中都能完美运行。我在这一行收到语法错误：const show = () =>"。

代码是这样的：

function cycle(info) {
  let i = 0,
    blocks = Object.keys(info);
  const show = () =>
    $("#" + blocks[i % blocks.length])
    .fadeIn(300)
    .delay(info[blocks[i++ % blocks.length]])
    .fadeOut(300, show);
  show();
}

//Run
cycle({
  block2: 7000,
  block3: 3000
});

JsFiddle here.

能否修复它以使其在 IE10+11 中也能正常工作？

【问题讨论】：

真正应该做的是使用 babel 将代码转译下来。
您应该更新标题以反映实际问题。问题不在于const，而在于箭头函数。
你是对的。我编辑了标题。

标签： javascript jquery

【解决方案1】：

这里有两个问题。首先，IE 根本不支持箭头功能。其次，const 关键字仅在 IE11+ 中支持，因此 IE10 及更低版本会出现问题。

要解决此问题，您需要修改逻辑以解决这些限制，如下所示：

function cycle(info) {
  let i = 0,
    blocks = Object.keys(info);

  var show = function() {
    $("#" + blocks[i % blocks.length])
      .fadeIn(300)
      .delay(info[blocks[i++ % blocks.length]])
      .fadeOut(300, show);
  }

  show();
}

【讨论】：

附带说明，使用带有 ES6 标志的捆绑器/压缩器可以自动为已部署的代码执行此操作。查看 UglifyJS。

【解决方案2】：

这是一个工作示例（在 IE 11 上测试）

function cycle(info) {
  let i = 0,
    blocks = Object.keys(info);
  const show = function() {
    $("#" + blocks[i % blocks.length])
      .fadeIn(300)
      .delay(info[blocks[i++ % blocks.length]])
      .fadeOut(300, show);
  }
  show();
}

cycle({
  block2: 7000,
  block3: 3000
});

#block2,
#block3 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block2">
  <div>Block 2</div>
</div>
<div id="block3">
  <div>Block 3</div>
</div>

您遇到的问题是您定义const show 的方式。我假设 IE 无法识别该方式，因此最简单的解决方法是将其更改为正常方式，即smth = function(){}。这解决了问题。

希望这会有所帮助！

【讨论】：

它现在在 IE10+11 中完美运行。感谢您的帮助。
@meek 我可以请您投票并将答案标记为已接受，以便未来的访问者可以更快地找到并解决他们的问题吗？谢谢！

【解决方案3】：

$(document).ready(function(){
function timeSet(){
$("#block3").fadeIn();
$("#block2").hide();
}
setInterval(timeSet,7000);
function timeSet1(){
$("#block3").hide();
$("#block2").fadeIn();
}
setInterval(timeSet1,3000);
})

#block2,
#block3 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block2">
  <div>Block 2</div>
</div>
<div id="block3">
  <div>Block 3</div>
</div>

【讨论】：

【解决方案4】：

IE 10 或 11 不支持 Lambda 表达式（或有人称其为“胖箭头表达式”）。

您可以改用编写函数表达式的古老而简单的方法：

代替：

() => {}

使用：

function(){}

【讨论】：