如何在javascript file2之前先加載javascript file1

Question

我有兩個JavaScript文件，一個帶有功能，另一個帶有eventlistener。 這就是我宣布他們的方式

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

主要功能

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') 。 有沒有辦法告訴javascript在為eventlistener執行文件之前先加載特定文件？

編輯1：在javascript在頁面上添加btnLike之前， btnLike加載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);
    }
});

它工作正常，我發現它使用了document並檢查target是否具有類名.buttonLike對嗎？

Answer 1

ajax是異步 Javascript和XML。

因此，由於異步，未按順序調用console.log 。 由於ajax可能需要一段時間才能被調用，因此首先會調用'ok2' 。

解決方案是在$.ajax的success或done方法中調用'ok2'

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

或簡單地

您可以偵聽腳本的load事件，並按需要處理結果。 所以：

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 個解決方案

解決方案1
1 已采納 2017-12-05 07:18:35

解決方案2
1 2017-12-05 07:23:01

如何在javascript file2之前先加載javascript file1

問題描述

2 個解決方案

解決方案1 1 已采納 2017-12-05 07:18:35

解決方案2 1 2017-12-05 07:23:01

解決方案1
1 已采納 2017-12-05 07:18:35

解決方案2
1 2017-12-05 07:23:01