来自 ajax 请求的值不可用

Question

我的 document.onready 中有一个函数，它会触发 ajax 请求并在我的页面上设置隐藏输入的值。我以这种方式设置它，因为每个页面都需要我想要发生的事情，所以这不是我可以 return 使用我的控制器的值。

之后，我有一个 setInterval，每 10 秒检查一次此隐藏输入的值，发出 ajax 请求以查看值是否已更改，如果已更改，则显示一条消息使用 Toastr 的屏幕（但它可能是警报或其他）。

问题是它在第一次设置隐藏输入的值时显示消息，我认为这是因为这是一个 ajax 请求，并且在调用 setinterval 时, 该值尚不可用，因此第一次将其设为 0，然后将其视为任何值，并将其视为更改。

有解决办法吗？代码如下：

    $(document).ready(function(){

        getStartingMissedJobs(); // Sets the value of the hidden input
        var startingMissedJobs = $('#missedJobs').val(); // store that value in a variable

        setInterval(function () {
// here i set the variable to the new value, if it 's changed or keep it..see below
            startingMissedJobs = checkIfNewExpiredJobs(startingMissedJobs);
        }, 10000);
    });

函数：

    var getStartingMissedJobs = function() {
        var localUrl = 'http://mylink.com';

        $.ajax({
            type: "POST",
            url: localUrl + "/actionurl",
            data: {},
            success: function(response) {
                var parsedResponse = JSON.parse(response);
                $('#missedJobs').val(parsedResponse[0]);
             },
             error: function(response){
                console.log(response);
                },
            dataType: 'html',
         });
    };
    var checkIfNewExpiredJobs = function(startingMissedJobs) {
        getExpiredJobs();
        var missedJobs = $('#missedJobs').val();
        if (missedJobs > startingMissedJobs) {
            missedJob();
            return missedJobs;
        }
        return startingMissedJobs;
    };

    $(function() {
        $('.nav-user li').hover(function(){
              $(this).addClass("open");
    }, function(){
        $(this).removeClass("open");
        });
    });
});

    var getExpiredJobs = function() {
        var serverUrl = 'http://contractor.hvac4.us/';
        var localUrl = 'http://fcarranza.contractor.sfdev01.com/';
        var missedJobs; 

        $.ajax({
            type: "POST",
            url: localUrl + "dispatch/newmissed",
            data: {},
            success: function(response) {
                var parsedResponse = JSON.parse(response);
                missedJobs = parsedResponse[0];
                $('#missedJobs').val(missedJobs);
             },
             error: function(response){
                console.log(response);
            },
            dataType: 'html',
         });
        return missedJobs;
    };

谢谢，

费

Answer 1

您的函数 getStartingMissedJobs 检索 missedJobs 输入的值并将其异步设置到代码的其余部分。这意味着行：

var startingMissedJobs = $('#missedJobs').val();

将在请求进行时进行评估，因此不太可能获得正确的值。

解决此问题的一种方法是向 getStartingMissedJobs 传递一个回调函数，该函数应在请求完成时调用。

然后可以使用该函数为已获得的初始值创建后续检查的时间间隔。

例如：

$(document).ready(function(){
    getStartingMissedJobs(function() {
        var startingMissedJobs = $('#missedJobs').val();
        setInterval(function () {
            startingMissedJobs = checkIfNewExpiredJobs(startingMissedJobs);
        }, 10000);
    });
});


var getStartingMissedJobs = function(callback) {
    ....
    ....
    $.ajax({
        ....
        success: function(response) {
            var parsedResponse = JSON.parse(response);
            $('#missedJobs').val(parsedResponse[0]);
            callback();
         },
         error: function(response){
            console.log(response);
            callback();
         },
         ....

来自 ajax 请求的值不可用

value from ajax request not available

javascript

ajax

setinterval