时间戳

首页 > 解决方案 > 如何等待变量具有值以便我可以执行其他代码？

javascript - 如何等待变量具有值以便我可以执行其他代码？

问题描述

我有点 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);
  }

标签： javascriptjqueryajax

解决方案

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

推荐阅读