jQuery插件报错‘not a function’：idleTimeout函数调用失败排查

遇到这个错误，本质是你的jQuery实例上找不到idleTimeout这个方法，结合你提供的代码和环境，我整理了几个最可能的原因：

1. jQuery 加载顺序错误 #

插件auto-logout.js依赖jQuery才能正常注册idleTimeout方法，所以你必须确保jQuery的引入代码在auto-logout.js之前。比如页面里的脚本顺序应该是这样：

<script src="path/to/jquery-2.2.4.js"></script>
<script src="/js/auto-logout.js"></script>

如果反过来，插件加载时jQuery还未定义，那么$.fn.idleTimeout根本无法挂载到jQuery对象上，调用时自然会报错。你可以检查页面的脚本引入顺序，或者查看浏览器控制台的网络面板，确认jQuery先于插件完成加载。

2. 插件代码存在语法错误 #

你提供的插件代码片段有明显的语法问题：

(function($) { $.fn.idleTimeout = function(userRuntimeConfig) { // ... }); }(jQuery));

内部定义$.fn.idleTimeout的函数没有正确闭合——需要在// ...的插件逻辑结束后加上};来完成方法定义，同时IIFE的括号也需要调整。正确的结构应该是：

(function($) {
  $.fn.idleTimeout = function(userRuntimeConfig) {
    // 插件内部逻辑
  }; // 闭合idleTimeout方法的定义
})(jQuery); // 正确闭合IIFE

如果插件代码缺少这个闭合的};，浏览器会解析失败，导致插件没有成功注册idleTimeout方法。

3. 页面多次加载了jQuery #

如果页面里重复引入了jQuery（比如先加载一次，插件加载后又加载了另一版本），第二次加载的jQuery会覆盖之前的实例——而你的插件是挂载在第一次的jQuery实例上的，后续的jQuery实例自然没有idleTimeout方法。

比如这种情况就会引发问题：

<script src="jquery-2.2.4.js"></script>
<script src="/js/auto-logout.js"></script>
<script src="another-jquery-file.js"></script> <!-- 重复加载jQuery -->

你可以搜索页面内的<script>标签，确认只引入了一次jQuery。

4. 插件文件未成功加载 #

打开浏览器的网络面板，查看/js/auto-logout.js的请求状态。如果返回404错误，说明文件路径不正确，插件根本没有加载到页面中，自然找不到idleTimeout方法。你需要确认文件的实际路径是否与引入路径一致，比如是否应该去掉开头的/，或者调整目录层级。

5. jQuery 的$别名被覆盖 #

虽然你使用的是jQuery 2.2.4，但如果页面里有其他库（如Prototype、Zepto）也使用$作为别名，或者代码中调用了$.noConflict()，那么$可能不再指向jQuery对象。

你可以尝试将调用代码改为用jQuery代替$，测试是否能正常运行：

jQuery(document).ready(function() {
  jQuery(document).idleTimeout({
    idleTimeLimit: 1200,
    customCallback: function() {
      axios.get('/auth/signout').then(function() {
        document.location.reload();
      }).catch(function(error) {
        console.error(error)
      });
    },
    dialogDisplayLimit: 30,
  });
});

如果这样能正常执行，说明$的别名被其他代码占用了。

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