tiny slider 报错 “t is not a function” 的根本原因是事件监听器在回调函数声明前被调用，导致变量提升（hoisting）未覆盖函数表达式初始化，引发引用错误。解决方案是确保回调函数先声明、再绑定。
tiny slider 报错 “t is not a function” 的根本原因是事件监听器在回调函数声明前被调用，导致变量提升（hoisting）未覆盖函数表达式初始化，引发引用错误。解决方案是确保回调函数先声明、再绑定。
在使用 Tiny Slider（v2.x）的 Vanilla JS 模式时，slider.events.on() 方法要求传入的回调函数必须已定义完成。你遇到的 Uncaught TypeError: t is not a function 错误，并非来自你的代码逻辑或 Tiny Slider 内部 bug，而是 JavaScript 函数表达式不具变量提升（hoisting）特性所致。
在原始代码中：
slider.events.on('indexChanged', illuminateSelectedIndex); // ❌ 此时 illuminateSelectedIndex 还未赋值，值为 undefined
var illuminateSelectedIndex = function (info, eventName) { // ✅ 声明在此之后
console.log(info.event.type, info.container.id);
};
由于 var illuminateSelectedIndex = function(...) {...} 是函数表达式（而非函数声明），其变量名 illuminateSelectedIndex 虽会被提升（初始化为 undefined），但函数体不会被提升。因此 slider.events.on(...) 执行时实际传入的是 undefined，而 Tiny Slider 内部尝试调用该“函数”时便抛出 t is not a function（压缩后 t 即代表回调参数）。
✅ 正确写法：先声明回调，再绑定事件
$(document).ready(function() {
const slider = tns({
container: '.jobs-slider',
items: 5,
autoWidth: true,
slideBy: 'page',
mouseDrag: true,
swipeAngle: false,
loop: true,
speed: 400,
navPosition: 'bottom',
controls: false,
center: true
});
// ✅ 必须在 .events.on() 之前定义回调函数
const illuminateSelectedIndex = function(info) {
console.log('Index changed to:', info.index);
console.log('Current page:', info.page);
};
// ✅ 绑定事件
slider.events.on('indexChanged', illuminateSelectedIndex);
});
⚠️ 注意事项：
- 不要使用
function illuminateSelectedIndex() {...}（函数声明）以外的方式动态覆盖该变量； - 若需在回调中访问
this或外部作用域变量，推荐使用箭头函数或显式绑定（如.bind(slider)），但注意 Tiny Slider 事件回调默认this指向slider.events实例； - 确保
tns()初始化成功后再操作slider.events—— 异步加载或 DOM 未就绪可能导致slider为undefined； - Tiny Slider v2.9+ 已废弃 IE8 支持，建议移除
tiny-slider.helper.ie8.js并使用现代语法（如const/let）提升可维护性。
? 小结：这不是 Tiny Slider 的缺陷，而是 JavaScript 执行机制的经典陷阱。牢记——事件监听器中的回调必须是已初始化的有效函数引用。调整声明顺序即可彻底解决该报错。
