Question

我想使用interval jquery方法使用get制作 loading ... 文字。示例与此link:stackoverflow相同。我能够显示文本，但是如何在get函数上实现它。

jQuery(document).ready(function($) {
  $(document).on("click", ".rekod", function() {
    i = 0;
    setInterval(function() {
      i = ++i % 4;
      $("#loading").html("loading" + Array(i + 1).join(".")).fadeIn();
    }, 500);

    var id = $(this).attr("id").split("-"),
      pageNo = parseInt(id[1]);
    loadResult(pageNo);
  });

  function loadResult(param) {
    $.get("result-updated.php", {
      startrow: param
    }, function(data) {
      $('#showAll').html(data);
    }).done(function() {
      $('#loading').fadeOut("slow");
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showAll"></div>
<span id="loading"></span>

从我的代码中

点击后会显示加载文字。
当get函数完成时，加载文本不会淡出。
我是以正确的方式做的吗？

更新代码：

我能够获得输出欲望，但我一直在寻找一种方法来清除间隔。以下是我添加的更新代码

$.ajaxSetup({
        beforeSend : 
        function(){
            i = 0;
            var loading = setInterval(function() {
                i = ++i % 4;
                $("#loading").html("loading"+Array(i+1).join("."));
                //clearInterval(loading);
                //It work if I insert here but the dot(.) will only appear once.
            }, 500);
        },
        complete : 
        function(){
        clearInterval(loading); //The function is not working here. 
        setTimeout(function(){
            $('#loading').html("Start");
        },2000);
    }
});

我希望点（。）重复自身并停止，直到它从get方法成功加载页面。

Answer 1

单击按钮后显示loading...文本，然后将其与响应一起删除。无需间隔。

使用Javascript：

jQuery(document).ready(function($) {
    $(document).on("click", ".rekod", function() {
        $('#loading').fadeIn("slow");
        loadResult();
    });
});


function loadResult() {
  $.get("result-updated.php", {
  }, function(data) {
    console.log(data);
    $('#showAll').html(data);
  }).done(function(data) {
    $('#loading').fadeOut("slow");
  });
}

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>


  <title>JS Bin</title>
</head>
<body>
  <div id="showAll"></div>
  <span id="loading" style="display:none;">
    loading...
  </span>
</body>
</html>

Answer 2

我做的解决方案。希望对有同样问题的人有用。

jQuery(document).ready(function($) {

  $(document).on("click", ".rekod, .view-detail", function(e) {
    e.preventDefault();
    if ($(this).attr("class") == "rekod") {
      var id = $(this).attr("id").split("-"),
        pageNo = parseInt(id[1]);
      loadResult(pageNo);
    } else {
      url = $(this).attr("href"),
        id = url.split("="),
        id = parseInt(id[1]);
      loadResult(id);
    }
  });

  loadingText = function() {
    i = ++i % 6;
    $("#loading").html("Loading" + Array(i + 1).join(".")).fadeIn();
    console.log(i);
  }

  function loadResult(param) {
    i = 0;
    var loading = setInterval(loadingText, 200);
    setTimeout(function() {
      // Ajax Function will be here
      clearInterval(loading);
      $('#loading').fadeOut();
    }, 1000);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="page-1" class="rekod">Click Me</a>
<div id="showAll"></div>
<div id="loading"></div>

如何使用加载文本实现间隔？

2 个答案: