如何等待變量具有值，以便我可以執行其他代碼？

Question

我有點JS菜鳥，我嘗試在線搜索一些東西，但沒有設法實現任何解決方案。 因此，我有以下JS代碼片段：

$(document).ready(function() {
    document.querySelector('#btn').addEventListener('click', function(e) {
        arr = my_func()
    });

    $("#btn").click(function() {
        $.ajax({
            url: "/some_url",
            type: "GET",
            dataType: "json",
            data: {
                coord: JSON.stringify({
                    "l1": arr[0],
                    "l2": arr[1]
                }),
                csrfmiddlewaretoken: '{{ csrf_token }}'
            },
            success: function(json) {
                window.location.href = "data/";

            },
            error: function(xhr, errmsg, err) {
                alert("Error: " + xhr.status + ": " + xhr.responseText);
            }
        });
    });
});

我基本上需要做的是，單擊#btn ，我需要獲取arr的值，以便隨后可以發送Ajax查詢，但是，這表明arr是undefined 。 當我每個步驟有兩個單獨的按鈕時（在一個按鈕中調用my_func在另一個按鈕中調用Ajax查詢），此方法有效，但是，我有點需要將它們融合在一起。 我已經為此苦苦掙扎了一段時間，無法做到。

編輯：根據要求，這是my_func（）函數的代碼段：

 function geoFindMe() { const status = document.querySelector('#status'); const mapLink = document.querySelector('#map-link'); mapLink.href = ''; mapLink.textContent = ''; function success(position) { latitude = position.coords.latitude; longitude = position.coords.longitude; status.textContent = ''; mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`; mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`; sol = [latitude, longitude]; console.log(sol) return sol; } function error() { status.textContent = 'Unable to retrieve your location'; } if (!navigator.geolocation) { status.textContent = 'Geolocation is not supported by your browser'; } else { status.textContent = 'Locating…'; navigator.geolocation.getCurrentPosition(success, error); } 

Answer 1

my_func函數必須返回Promise的新實例。 這樣，您可以使用await等待arr設置，然后進行Ajax調用。 因此，讓我們做一個例子：

function my_func() {
    return new Promise(resolve => resolve('hello'));
}

$(document).ready(function() {
    document.querySelector('#btn').addEventListener('click', function(e) {
            async function arr() {
                arr = await my_func();
                $.ajax({
                    url: "/some_url",
                    type: "GET",
                    dataType: "json",
                    data: {
                        coord: JSON.stringify({
                            "l1": arr[0],
                            "l2": arr[1]
                        }),
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function(json) {
                        window.location.href = "data/";

                    },
                    error: function(xhr, errmsg, err) {
                        alert("Error: " + xhr.status + ": " + xhr.responseText);
                    }
                });
            });
    }
    arr();
});

Answer 2

您可以使用以下代碼參考為此使用setInterval()和clearInterval ：

 var text = document.getElementById('pleaseWait'); var counter = 0; var interval = setInterval(popItUp, 200); function popItUp() { if (text.value.length > 0) { clearInterval(interval); document.getElementById('waitingText').innerHTML = 'text entered!!'; // Apply your ajax here } else { document.getElementById('waitingText').innerHTML = 'waiting..'; } } 

 <input onkeyup="popItUp()" type="text" name="pleaseWait" id="pleaseWait" /> <div id="waitingText"></div> 

該代碼將等待在輸入字段中輸入文本。 輸入文字后，間隔將被清除。

這是小提琴的鏈接。