Question

我有两个带有函数的javascript文件，另一个带有eventlistener。这就是我宣布它们的方式

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

Main Functions.js

checklike(userId,postId);
function checkLike(userId, postId) {
    $.ajax({

        type: "POST",
        url: "../Main.asmx/get_liked",
        data: "{'userID':'" + userId + "', 'postID':'" + postId + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var result = response.d;
            console.log('ok');
            $.each(result, function (index, data) {
                var liked = data.liked;
                if (liked == true) {
                    $("#" + postId).prev().parent("button").css("background", "#ccc");
                }
                else {
                    $("#" + postId).prev().parent("button").css("background", "white");
                }
            });

        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert('Function Error "checkLike"');
        }

    });
}

主-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');首先执行而不是console.log('ok')。在执行eventlistener的文件之前，有没有办法告诉javascript首先加载特定文件？

编辑1：在javascript在页面上添加elemet之前，先为eventlistener加载btnLike。

编辑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);
    }
});

它工作正常，我发现它使用document并检查target是否有类名.buttonLike我是对的吗？

Answer 1

ajax 异步 Javascript和XML。

因此，异步时，console.log不会按顺序调用。由于ajax可能需要一段时间才能被调用，'ok2'首先被调用。

解决方法是在'ok2'的{{1}}或success方法中调用done

Answer 2

如果你想在你的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>

这是纯粹的猜想和推测;我没有尝试过它，可能有更好的方法来编写它，但这不会做你想做的事情。编辑：脚本在浏览器看到时加载，而不是事后。它们将在此之前加载。

如何在javascript file2之前加载javascript file1

2 个答案: