如何在javascript文件2之前先加载javascript文件1_Javascript_Html

如何在javascript文件2之前先加载javascript文件1

javascript html

如何在javascript文件2之前先加载javascript文件1,javascript,html,Javascript,Html,我有两个javascript文件，一个带有函数，另一个带有eventlistener。我就是这样申报的 <body> <script src="../script/Main%20Functions.js"></script> <script src="../script/Main-events.js"></script> </body> Main-events.js const d = document.q

我有两个javascript文件，一个带有函数，另一个带有eventlistener。我就是这样申报的

<body>
    <script src="../script/Main%20Functions.js"></script>
    <script src="../script/Main-events.js"></script>
</body>

Main-events.js

const d = document.querySelector.bind(document);
const D = document.querySelectorAll.bind(document);
const logOut = d('.lOut h3');
const iFrame = d('#if1');
const alias = d('.codename-label h2');
const monito = d('.monito-label');
const monitoChecklists = D('.monito-checklist');
const displayPicture = d('#displayPic');
const btnReveal = d('.btn-reveal');
const btnSubmit = d('.btn-submit');
const btnLike = D('.buttonLike');
console.log('ok2');
btnLike.forEach(function (like) {
    like.addEventListener('click', function (e) {
        console.log(this);
    })
});

但是当我打开html时，

console.log（'ok2'）首先执行，而不是控制台.log（'ok'）
。在为eventlistener
执行文件之前，是否有方法告诉javascript先加载特定文件
编辑1：在javascript在页面上添加元素之前，首先加载btnLike
的eventlistener

编辑2：调查后可以
在尝试eventlistener之前，我使用以下jquery代码
$(document).on('click', '.buttonLike', function () {
    var color = $(this).css("background-color");
    var id = $(this).find(".postID").attr("id");
    if (color == "rgb(204, 204, 204)") {
        $(this).css("background-color", "white");
        var number = parseInt($("#" + id).html().substring(0, $("#" + id).html().indexOf(" "))) - 1;
        if (number > 1) {
            number = number + " Likes";
        }
        else {
            number = number + " Like";
        }
        $("#" + id).html(number);
        Remove_Like(id);
    }
    else {
        $(this).css("background-color", "#ccc");
        var number = parseInt($("#" + id).html().substring(0, $("#" + id).html().indexOf(" "))) + 1;
        if (number > 1) {
            number = number + " Likes";
        }
        else {
            number = number + " Like";
        }
        $("#" + id).html(number);
        Add_Like(id);
    }
});

它工作正常，我发现它使用了文档
，并检查目标
是否有类名。按钮式
我说得对吗？
ajax
是异步的Javascript和XML
因此，由于是异步的，console.log
没有按顺序调用。由于ajax
可能需要一段时间才能被调用，因此'ok2'
首先被调用
解决方法是在$的success
或done
方法中调用'ok2'
。如果要在ajax调用中加载另一个js文件，可以使用此方法
jQuery的$.getScript（）有时会出现错误，因此我使用自己的实现，如：
jQuery.loadScript = function (url, callback) {
    jQuery.ajax({
        url: url,
        dataType: 'script',
        success: callback,
        async: true
    });
}

然后像这样使用它：
if (typeof someObject == 'undefined') $.loadScript('url_to_someScript.js', function(){
    //Stuff to do after someScript has loaded
});

或者干脆
您可以监听脚本的加载事件，并按照自己的意愿处理结果。因此：
var script = document.createElement('script');
script.onload = function () {
    //do stuff with the script
};
script.src = something;

document.head.appendChild(script); //or something of the likes

另一种选择
将在脚本加载完成时激发
您将无法执行以下操作：
<script src="/foo.js"></script>
<script src="/bar.js"></script>
<script>
function alertonload(src){
   console.log(src+' is loaded');
}
scripts = document.getElementsByTagName('script');
for(var i=0; i<scripts.length; i++){
    scripts[i].onload = function(){ alertonload(scripts[i].src); };
}
</script>


函数alertonload（src）{
log（src+'is loaded'）；
}
scripts=document.getElementsByTagName（'script'）；
对于（var i=0；i您的Main-events.js文件中有什么？仅限于console.log（'ok2'））；？两个脚本文件以正确的顺序加载，但Ajax调用是异步进行的。当Ajax调用完成@PatrickHund的可能副本时，将执行第一个console语句。我将发布我遇到的真正难题facing@PatrickHund请查看已编辑的版本。请重新阅读已编辑的版本。因此，如果我遵循此logic，我需要在success上添加eventlistener
？为什么要在开始时调用checklike（userId，postId）；
而不是在addEventListener
method@VianOjedaGarcia尝试调用checklike（）addEventListener
方法中的方法。看起来更符合逻辑，这真的是正确的方法吗？因为当页面首先加载时，它会获得帖子（类似facebook）检查这篇文章有多少喜欢的人。然后创建元素。我现在知道你的问题了。你应该做的是，在success方法中创建元素，然后向其中添加事件侦听器。这就解决了问题。
<script src="/foo.js"></script>
<script src="/bar.js"></script>
<script>
function alertonload(src){
   console.log(src+' is loaded');
}
scripts = document.getElementsByTagName('script');
for(var i=0; i<scripts.length; i++){
    scripts[i].onload = function(){ alertonload(scripts[i].src); };
}
</script>