在页面初始化js函数

Question

我有一个js文件，里面有一个带多个参数的函数

function initSlider(slider, sliderRow, slides, CLONES_COUNT, doAutoPlay) {
. . .
}

我想在不同的页面上使用这个功能，但参数略有不同，假设其中一个页面会有

initSlider(slider, sliderRow, slides, (slides.length < 2) ? 0 : 1, slides.length > 1)

问题是，如何在页面本身调用这个初始化函数？

laravel 的常用页面，blade.php，最后有一个带有脚本的部分

@section('scripts')
<script src="/js/slider.js"></script>
@endsection

我试过这样

@section('scripts')
<script src="/js/slider.js"></script>
<script>
   $(document).ready(function(){
        initSlider(slider, sliderRow, slides, (slides.length < 2) ? 0 : 1, slides.length > 1);
   });
</script>
@endsection

我似乎做的一切都是正确的，但我得到了错误

jQuery.Deferred 异常：未定义 initSlider ReferenceError：未在 HTMLDocument 中定义 initSlider。 (http://test.loc/blog/article_1:730:9) 在 e (https://code.jquery.com/jquery-3.6.0.min.js:2:30038) 在 t (https://code.jquery.com/jquery-3.6.0.min.js:2:30340) 未定义

未捕获的 ReferenceError: initSlider 未在 HTMLDocument 中定义。 （文章_1：730） 在 e (jquery-3.6.0.min.js:2) 在 t (jquery-3.6.0.min.js:2)

Answer 1

你需要在$(document).ready()中调用你的函数

.ready() 方法提供了一种运行 JavaScript 代码的方法 页面的文档对象模型 (DOM) 变得可以安全操作。这 通常是执行任务之前所需的好时机 用户查看或与页面交互，例如添加事件 处理程序和初始化插件。

说明：脚本是异步加载的，因此不能保证您的脚本文件会在您调用函数之前被加载。使用 .ready() 可以确保在加载其他所有内容后调用该函数。

@section('scripts')
<script src="/js/slider.js"></script>
<script>
   $(document).ready(function(){
        initSlider(slider, sliderRow, slides, (slides.length < 2) ? 0 : 1, slides.length > 1);
   });
</script>
@endsection