使用 AJAX 定期将数据重新发布到 Laravel 后端时出现问题

Question

我正在开发一个 PHP Laravel 项目，当用户单击网站上的按钮时，我使用 AJAX 对 PHP 后端执行一些后台任务，当用户通过他/她付款时，我触发对支付网关的调用电话，，，我检查付款状态（其中1表示已付款，0表示未付款），如果状态等于1，我将用户重定向到成功页面。

目前正在使用 AJAX 将数据从前端发布到后端，我想在 5 秒后定期发布数据（在此我给用户一些时间付款，然后再联系 API 以查看状态是否已更改为 1 然后重定向用户）。

我正在尝试在 JavaScript 中使用 setTimeout 方法并 dd() 来自控制器的数据，该控制器只转储一次数据，但 5 秒后不转储

AJAX 代码在 5 秒后将数据发布到后端

  $('.mpesa').on('click', function () {
      // run the first time; all subsequent calls will take care of themselves
      setTimeout(executeQuery, 5000);
    });

    function executeQuery() {
      alert('clicked');
        //Adds Class to the page when it loads
        $('.PAY').addClass("loading");
        //Gets the MPESA type
        var type = $('.mpesa').prop('id');
        var quote = $('#quote').val();
        var phone = $('#phone').val();
        //Converts to a JSON object
        var type ={
          'type': type,
          'quote' : quote,
          'phone' : phone,
        };

        console.log(type);

        $.ajax({
            //Contains controller of payment
            type: 'POST',
            url: 'paymentFinal',
            data: JSON.stringify(type),
            contentType: 'application/json',
            dataType: "json",
            success: function success(response) {
                console.log(response);
            },
            error: function error(data) {
                console.log(data);
            }
        });
    }
    //End AJAX call

正在调用的控制器文件

 public
    function payFinal(Request $request)
    {
        dd($request->all());

    }

更新的 AJAX 代码

$('.mpesa').on('click', function () {
    setInterval(function() {
       alert('clicked');
      //Gets the MPESA type
       var type = $('.mpesa').prop('id');
      var quote = $('#quote').val();
      var phone = $('#phone').val();
      //Converts to a JSON object
      var type ={
        'type': type,
        'quote' : quote,
        'phone' : phone,
      };

    console.log(type);
    $.ajax({
        //Contains controller of payment
        type: 'POST',
        url: 'paymentFinal',
        data: JSON.stringify(type),
        contentType: 'application/json',
        dataType: "json",
        success: function success(response) {
          if(response) {
              window.location.href="success";
          }
        },
        error: function error(data) {
            console.log(data);
        }
    });
}, 15000); // Execute every 15 seconds
});

Answer 1

setTimeout 在你设置的延迟后只执行一次指定的函数。请改用setInterval，以便定期调用您的函数。

================================================ ============================

更新： 您希望您的函数在用户单击时立即执行，然后每 15 秒调用一次。为此，您只需使用以下代码：

$('.mpesa').on('click', executeQuery);

function executeQuery() {
  alert('clicked');
    //Adds Class to the page when it loads
    $('.PAY').addClass("loading");
    //Gets the MPESA type
    var type = $('.mpesa').prop('id');
    var quote = $('#quote').val();
    var phone = $('#phone').val();
    //Converts to a JSON object
    var type ={
      'type': type,
      'quote' : quote,
      'phone' : phone,
    };

    console.log(type);

    $.ajax({
        //Contains controller of payment
        type: 'POST',
        url: 'paymentFinal',
        data: JSON.stringify(type),
        contentType: 'application/json',
        dataType: "json",
        success: function success(response) {
            console.log(response);
        },
        error: function error(data) {
            console.log(data);
        }
    });

    //use setTimeout here
    setTimeout(executeQuery, 15000);

}

在你的函数中使用setTimeout来调用它自己会解决你的问题。

================================================ ============================

[回答OP关于如何停止计时器的问题]

在你的函数中，假设你希望函数在 5 次后停止执行。

在函数外设置变量：

var counter = 0;

然后在executeQuery:

if (counter <= 5) { //or use your own logic
    counter++;
    setTimeout(executeQuery, 15000);
}

请记住，setTimeout 是一次性的，因此您可以控制何时停止调用它。