How to Implement Interval with Loading Text?

Question

I want to make a loading... text using interval with jquery get method. Example as same as on this link:stackoverflow. I am able to make the text appear but how do I want to implement it on my get function.

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>

From my code,

the loading text appear after clicked.
the loading text won't fade out when the get function is done.
Am I doing it the right way?

Update Code:

I'm able to get the output desire but I'm stuck on finding a way to clear the interval. Below are the updated code that I add,

$.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);
    }
});

I want the dot(.) to repeat itself and stop until it has successful load the page from get method.

You could add the fadeout to the succes function? function(data) { $('#showAll').html(data); $('#loading').fadeOut("slow"); }) — Roelant
– Roelant, Commented Mar 9, 2017 at 8:15
I think that loadResult() which fades the loading... text out is called before the interval of 500ms which fades the text in. So fadeOut is called before fadeIn. Why are you setting the interval anyways? It will register a new interval everytime you click the button. Is that really what you want? — Sebastian
– Sebastian, Commented Mar 9, 2017 at 8:23
@Schlangguru I want to animate the loading... word. Is there another way without using the interval. — Amran
– Amran, Commented Mar 9, 2017 at 8:29

Sebastian · Accepted Answer · 2017-03-09 08:47:30Z

0

Just display the loading... text after clicking on the button and remove it with the response. No need for an interval.

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>

answered Mar 9, 2017 at 8:47

Sebastian

1,77215 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amran Over a year ago

Thanks for the answer. Close to what I want but I want the dot(.) on the loading word to move just like the link I gave above

Amran · Accepted Answer · 2017-03-13 01:21:01Z

Solution that I made. Hope will be useful for someone with the same problem.

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>

Collectives™ on Stack Overflow

How to Implement Interval with Loading Text?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related