jQuery animation, fire a function every other second?

时间:2015-10-30 22:18:47

标签: javascript jquery

Im trying to make an upload script with jQuery and a loading bar aswell.

I got a field with multiple upload possibility. Every file gets two second on the loading bar.

So to count the time i have this:

var length = array.length; 
var time = length*2; 
var totalTime = time*1000; // To count the totaltime, not milliseconds.

My question now is, if i upload several files, we say like 3 files. Then i have 6 seconds in the loading bar, is there a way to make a function fire every two seconds? Do i have to do this outside the animation with setinterval? If so how do i stop a setinterval? Or is it possible to do it inside the animation?

$(".filesUpload").on("change", function() {
  var files = $(".filesUpload").prop("files");
  var names = $.map(files, function(val) {
    return val.name;
  });
  totalFiles = names.length;
  $("#uploadBar").modal('show');

});
$("#uploadBar").on("shown.bs.modal", function() {
  var time = totalFiles * 2;
  var totalTime = time * 1000; // Get seconds, not milliseconds.
  $(".progress-bar-success").animate({
    width: "+=100%"
  }, totalTime);
});
<!-- Modal -->
<div class="modal" id="uploadBar">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="progress">
          <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<form method="post" enctype="multipart/form-data">
  <input type="file" name="filesUpload[]" class="filesUpload" multiple="">
</form>

0 个答案:

没有答案