将内联Javascript移动到外部组合Javascript

大家好，我正忙着将所有内联Java脚本移动到一个组合的.js文件中。在我的标题中，我有下面的代码。我在wordpress工作

下面的代码在我的页面上创建了一个滑块函数。我已经将javascript的大部分内容移动到一个组合的js文件中

<br /><br /><script>(function($){jssor_slider1_starter = function (containerId) {var jssor_slider1 = new $JssorSlider$(containerId, {$DragOrientation: 3, $ArrowNavigatorOptions: {$Class: $JssorArrowNavigator$, $ChanceToShow: 2 }}); function ScaleSlider() { var windowWidth = $JssorUtils$.$GetWindowSize(window).x; if (windowWidth) jssor_slider1.$ScaleWidth(windowWidth); else window.setTimeout(ScaleSlider, 30);}
        $Jssor$.$AddEvent(window, "load", ScaleSlider);

        $Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));
        $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);

}}）（jQuery）

还有这一部分

(function($){jssor_slider1_starter('slider1_container')})(jQuery);

但是我运气不好

---

任何关于此脚本内联正确执行的想法（但不是我将其包含到js文件中时）都将受到赞赏，并且关于如何实现来自外部combined.js文件的调用以实现此功能的任何建议都将受到极大赞赏

您需要先渲染

slider1\u container

div，然后才能使用它，尝试将JS调用放在页脚上或将其包装：

(function($){jssor_slider1_starter('slider1_container')})(jQuery);

像这样：

jQuery(document).ready(function() {
  (function($){jssor_slider1_starter('slider1_container')})(jQuery);
});

<script src="<url of combine.js>" type="text/javascript" />

---

因此，在执行JS之前，它会等待文档准备就绪。

如果外部文件combine.JS中包含所有JS，只需使用如下脚本标记将其包含在HTML中：

jQuery(document).ready(function() {
  (function($){jssor_slider1_starter('slider1_container')})(jQuery);
});

<script src="<url of combine.js>" type="text/javascript" />

然后javascript将在HTML中包含脚本标记的位置运行，就像示例中的脚本标记一样，javascript代码位于标记体中

注意，为了获得最佳性能，您可能需要将脚本标记置于最高位

---

就这样，应该就行了。如果没有，请检查javascript控制台是否有错误。

Hi David-这是一个很好的提示，但是当我取出异步脚本时，外部脚本正在加载。脚本工作，当我再次放回时，它没有任何作用。我正是这样做的，当我将脚本放入异步加载时，它会中断。。。当我删除它时，它会再次工作，你说的异步加载是什么意思？当您使用上述标记加载外部脚本时，它将阻止页面，直到脚本下载并执行为止。这是相当同步的，这就是为什么在加载DOM的其余部分之后，为了提高性能，最好将其放在底部。我不明白当你移除它时它是怎么工作的！？你的意思是说，当你恢复到你的例子中的情况时，它会起作用吗？看到你对另一个答案的评论后，我发现你正在使用async属性异步加载脚本。如果要执行此操作，请确保仅在HTML中解析了相应的div之后才运行函数。您可以使用David Lee的jQuery（document）.ready解决方案来解决这个问题，也可以在全局命名空间中声明命名函数，并在HTML中适当位置的脚本标记中调用它们。或者，不要使用async并将标记放在正文的底部。在这种情况下，可能不会注意到任何性能差异。