使用Tiny Slider自定义事件时出现“t is not a function”错误如何解决？

问题场景 #

我在Vanilla模式下使用Tiny Slider，代码如下：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
<!--[if (lt IE 9)]><script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.helper.ie8.js"></script><![endif]-->

<div class="jobs-slider">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

<script
  src="https://code.jquery.com/jquery-3.7.1.js"
  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<!-- NOTE: prior to v2.2.1 tiny-slider.js need to be in <body> -->

<script>
$( document ).ready(function() {
    /* Tiny Slider */

    var 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
    });

    slider.events.on('indexChanged', illuminateSelectedIndex);
    
    var illuminateSelectedIndex = function (info, eventName) {
        console.log(info.event.type, info.container.id);
    }
    
});
</script>

执行slider.events.on('indexChanged', illuminateSelectedIndex);时，抛出错误：

Uncaught TypeError: t is not a function

解决方法 #

1. 调整回调函数定义顺序 #

错误核心是回调函数在绑定后才定义。JavaScript中var声明的变量会提升，但赋值操作不会提前，绑定事件时illuminateSelectedIndex的值为undefined，导致Tiny Slider内部处理回调时触发类型错误。

把函数定义移到事件绑定语句之前即可修复：

$( document ).ready(function() {
    /* Tiny Slider */

    var 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
    });

    // 先定义回调函数
    var illuminateSelectedIndex = function (info, eventName) {
        console.log(info.event.type, info.container.id);
    }
    
    // 再绑定事件
    slider.events.on('indexChanged', illuminateSelectedIndex);
});

2. 统一Tiny Slider版本 #

当前代码中CSS用的是2.9.4版本，JS用的是2.9.2版本，版本不一致可能引发潜在兼容性问题，建议统一为相同版本，比如都使用2.9.4：

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.js"></script>

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