单击按钮调用函数时 JQuery 代码出现问题

Question

我是 Node.js 和 Jquery 的新手。

在按钮上的以下代码中，单击我已经运行了一个任务，我们无法预测该任务何时完成在完成任务时，我将获得测试结果并将其存储在数据库中。

这是我的 html 代码

<table>
  <tr>
    <td style="height:10px;">
      <div id="testResult" style="padding-left: 120px; display: none; ">
        <img src="./images/spinner.gif" />Running the test...
      </div>
    </td>
  </tr>
</table>
<button id="runBtn">RUN</button>

首先在按钮单击中，我编写了运行任务的代码，我们无法预测它何时完成。将数据存储在数据库中后，我必须获取该数据，我还必须调用按钮单击功能。

$('#runBtn').click(function() {
var unitData 
.....
.....
// For running the task
   $.ajax({
      type: "post",
      url: "/runTask",
      dataType: "json",
      data: unitData,
      success: function (value) {
        console.log("Data saved succesfully");
      },
    });

// For fetching the result of task      

    $('#testResult').html('<img src="./images/spinner.gif" /> Running the test...');
        $('#testResult').show();
        $.ajax({
          url: '/getReport',
          cache: false
        }).done(function (html) { 
          $("#testResult").html( htm );
          $('#edit').removeAttr("disabled");
        }).fail(function () {
          $("#testResult").html("Failed to run the test");
          $('#edit').removeAttr("disabled");
        });      

    })

我需要的是单击按钮，我必须显示一个正在运行测试的旋转图像...(我们无法预测测试何时完成)并且在测试完成后将数据存储在数据库中(工作正常)并且必须显示网页中的数据并消失旋转图像。

现在发生的事情是，当我单击运行按钮时，测试将运行，同时调用 '/gerReport' 并返回 null 值。我需要调用 /getReport 仅在测试结果出现并显示带有文本测试正在运行的旋转图像后..

.

Answer 1

给你:

var $testResultElement = $("#testResult"),
    onRunTaskCompleted = function () {
        console.log("Data saved succesfully");

        // Task running is complete, so now we can get the report
        $.ajax({
            url: '/getReport',
            cache: false
        }).done(function (html) { 
            $testResultElement.html(html);
        }).fail(function () {
            $testResultElement.html("Failed to run the test");
        }).always(function () {
            $('#edit').removeAttr("disabled");
        });
    };

$('#runBtn').click(function() {
    // var unitData
    // .....
    // .....
    $testResultElement.html('<img src="./images/spinner.gif" /> Running the test...').show();

    // For running the task
   $.ajax({
        type: "post",
        url: "/runTask",
        dataType: "json",
        data: unitData,
        success: onRunTaskCompleted
    });

逻辑如下:

• 单击按钮时，首先显示微调器(运行测试...)
• 开始任务。注意我如何更改 ajax 的 success 属性称呼。我制作了一个单独的函数来处理“成功”，以使您的代码更容易理解(为你自己)
• onRunTaskCompleted 在任务完成时运行。它会打电话'获取报告'。旋转器还在旋转!
• 当调用“getReport”返回时，我们设置返回的 html，或消息“无法运行测试”。我添加了一个始终回调从编辑按钮中删除禁用的属性。这是因为你想在完成和失败时都这样做，并且总是如此这是理想的方式，因为它会在完成和失败时运行。