初始化页面上的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。延迟异常:initSlider is not defined在HTMLDocument中没有定义。(http://test.loc/blog/article_1:730:9)网址:e (https://code.jquery.com/jquery-3.6.0.min.js:2:30038)At t (https://code.jquery.com/jquery-3.6.0.min.js:2:30340) undefined

Uncaught ReferenceError: initSlider未在HTMLDocument中定义。(article_1:730)(jquery-3.6.0.min.js:2)At 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