Chrome、Firefox正常运行但IE11报错：destroy函数未定义

你遇到的IE11报错'destroy' is undefined主要有两个核心原因，结合你的代码场景，咱们一步步拆解：

1. 函数加载顺序的兼容性差异 #

你在body中部的<a>标签里用内联onclick="destroy(80)"调用函数，但JS文件是在</body>前才加载的。

• 现代浏览器（Chrome/Firefox）会对这种“提前引用”有一定容错：即使函数还没定义，只要点击事件触发时函数已加载，就能正常执行。
• 但IE11的解析逻辑更严格：当页面渲染到这个<a>标签时，会立刻检查destroy函数是否存在，此时JS文件还没加载，直接抛出“未定义”错误。

解决办法： #

• 方案一：调整JS加载位置：把<script src="https://thing.test/js/things-common.js"></script>放到<head>标签里，或者放到调用destroy的代码之前。不过要注意，如果函数里操作DOM，需包裹在window.onload或DOMContentLoaded事件里，避免DOM未就绪的问题。
• 方案二：改用事件委托（推荐）：放弃内联onclick，等DOM加载完成后动态绑定事件，彻底规避加载顺序问题：

  <!-- 修改HTML，用自定义属性传递参数 -->
  <li><a href="#" data-destroy-id="80">Delete</a></li>
  

  // 在things-common.js里添加事件绑定
  document.addEventListener('DOMContentLoaded', function() {
    // 找到所有删除按钮
    var deleteLinks = document.querySelectorAll('[data-destroy-id]');
    for (var i = 0; i < deleteLinks.length; i++) {
      deleteLinks[i].addEventListener('click', function(e) {
        e.preventDefault(); // 阻止默认跳转
        var id = this.getAttribute('data-destroy-id');
        destroy(id); // 此时destroy函数已经加载完成
      });
    }
  });
  

2. ES6语法的兼容性问题 #

你补充的destroy函数里用到了箭头函数(willDelete) => { ... }，还依赖了SweetAlert的.then()方法（基于Promise）：

• IE11完全不支持箭头函数，也没有原生Promise对象，这会直接导致代码执行失败，甚至可能让整个destroy函数无法被正确解析。

解决办法： #

• 转译ES6代码到ES5：用Babel把你的JS代码转成IE11支持的ES5语法，箭头函数会被转成普通的function，Promise也可以通过polyfill补充。
• 兼容SweetAlert版本：如果用的是SweetAlert2，v11及以上版本不再支持IE11，建议降级到v10.x版本；同时引入Promise polyfill，确保.then()能正常运行。
• 手动替换ES6语法：把箭头函数改成普通函数，比如：

  function destroy(id) {
    swal({
      text: "Do you really want to delete this thing?",
      icon: "warning",
      buttons: true,
      dangerMode: true,
    }).then(function(willDelete) { // 把箭头函数改成普通function
      if (willDelete) {
        AxiosDestroyThing(id);
      }
    });
  }
  

总结你的操作失误 #

1. 依赖了现代浏览器对“提前引用函数”的容错性，而IE11没有这个容错机制；
2. 使用了IE11不支持的ES6特性（箭头函数），且未做兼容性处理。

内容的提问来源于stack exchange，提问作者Mick