Question

我希望将setTimeout添加到JS函数中，但在此函数中我还有另一个函数，我知道我可以使用onclick=setTimeout"(fooBar(), 2500);"但是在那里＆＃39; sa在我的函数内部加载，为了清楚起见，我想在单击按钮时立即执行该功能（show loader div），但在运行setTimout之前$.getJSON到2500毫秒。让我们说我想在api请求中添加一个假的timeOut，因为那些东西非常快。

另外，如果我的JS加载动画方法没问题，请告诉我，实际上我认为显示/隐藏div的代码行太多了。我确定有更好的方法来处理这样的事情。感谢。

＆＃13;

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>JS Loader</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>

<style type="text/css" id="style">
  
  #myloader {
  position: relative;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: 25% -50;
  border: 16px solid #000;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}
</style>


<div class="container container-table">
<div class="row vertical-center-row">

  <div class="col-md-4 col-md-offset-4">

    <h1 id="name" >Real-time Bitcoin Price</h1>

    <div id="myloader"style="display: none;"></div>

    <p id="cointime"></p>
    <div id="dollar"></div>
    <div id="gbp"></div>
    <div id="euro"></div><br>

    <button id="refreshBtn" class="btn btn-primary">Load Data</button>
    
  </div>

</div>
</div>

<script type="text/javascript">

  document.getElementById("refreshBtn").addEventListener("click", function () {

    var x = document.getElementById('myloader');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }

  $.getJSON("https://api.coindesk.com/v1/bpi/currentprice.json", function (data) {

        var x = document.getElementById('myloader');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
      $("#cointime").text(data.time.updated);
      $("#dollar").text("USD : " + '  ' + data.bpi.USD.rate);
      $("#gbp").text("GBP : " + '  ' + data.bpi.GBP.rate);
      $("#euro").text("EUR :" + '  ' + data.bpi.EUR.rate);
  })
});


</script>


 <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

</body>
</html>

＆＃13;

Answer 1

要延迟AJAX请求，只需将$.getJSON电话打包到setTimeout()即可。另请注意，您正在使用jQuery和本机JS函数的奇怪组合。我建议使用其中一种，例如：

＆＃13;

$("#refreshBtn").on("click", function() {
  $('#myloader').show();

  setTimeout(function() {
    $.getJSON("https://api.coindesk.com/v1/bpi/currentprice.json", function(data) {
      $('#myloader').hide()
      $("#cointime").text(data.time.updated);
      $("#dollar").text("USD : " + '  ' + data.bpi.USD.rate);
      $("#gbp").text("GBP : " + '  ' + data.bpi.GBP.rate);
      $("#euro").text("EUR :" + '  ' + data.bpi.EUR.rate);
    })
  }, 2500);
});

＆＃13;

#myloader {
  position: relative;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: 25% -50;
  border: 16px solid #000;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* Add animation to "page content" */

.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0
  }
  to {
    bottom: 0px;
    opacity: 1
  }
}

@keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0
  }
  to {
    bottom: 0;
    opacity: 1
  }
}

#myDiv {
  display: none;
  text-align: center;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="container container-table">
  <div class="row vertical-center-row">
    <div class="col-md-4 col-md-offset-4">
      <h1 id="name">Real-time Bitcoin Price</h1>
      <div id="myloader" style="display: none;"></div>
      <p id="cointime"></p>
      <div id="dollar"></div>
      <div id="gbp"></div>
      <div id="euro"></div><br>
      <button id="refreshBtn" class="btn btn-primary">Load Data</button>
    </div>
  </div>
</div>

＆＃13;

另外我建议增加2.5秒的延迟太多了。我知道添加一点点延迟以使数据加载更加明显对于UX来说是一个好主意，但是我说500毫秒就足够了。

Answer 2

首先 - 对象/元素：

您应始终缓存多次使用的元素。意味着：将对象分配给可在任何需要的地方访问的变量。为什么？因为您可以随意使用变量。这样可以节省大量时间和处理能力，因为您无需一次又一次地查找具有特定id或class的元素。在我的情况下是var x。

第二 - 加载器：

show()中有hide()和jQuery这样的简单内容，但我使用了ternary operation。为什么？它非常灵活，因为我知道它，所以我整天都在使用它。所以我想告诉你这是一个方便的选择： - ）。

第三 - 超时：

非常直接，将function包裹在setTimeout()中，然后你去。

这是一个工作小提琴：

编辑：现在，您可以将x.style.display行包装在单独的function中并调用它，以便您可以重复使用代码，而不必将其写入两次，但我认为为了示范目的，这应该没问题。

var x = document.getElementById('myloader');

document.getElementById("refreshBtn").addEventListener("click", function () {

    x.style.display = (x.style.display === 'none') ? 'block' : 'none';

  setTimeout(function(){
    $.getJSON("https://api.coindesk.com/v1/bpi/currentprice.json", function (data) {

      x.style.display = (x.style.display === 'none') ? 'block' : 'none';
    
      $("#cointime").text(data.time.updated);
      $("#dollar").text("USD : " + '  ' + data.bpi.USD.rate);
      $("#gbp").text("GBP : " + '  ' + data.bpi.GBP.rate);
      $("#euro").text("EUR :" + '  ' + data.bpi.EUR.rate);
    });
  },2500);
});

#myloader {
  position: relative;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: 25% -50;
  border: 16px solid #000;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="container container-table">
<div class="row vertical-center-row">

  <div class="col-md-4 col-md-offset-4">

    <h1 id="name" >Real-time Bitcoin Price</h1>

    <div id="myloader" style="display: none;"></div>

    <p id="cointime"></p>
    <div id="dollar"></div>
    <div id="gbp"></div>
    <div id="euro"></div><br>

    <button id="refreshBtn" class="btn btn-primary">Load Data</button>
    
  </div>

</div>
</div>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Answer 3

var timeout = null

function refresh () {
  function load () {
    $.getJSON('https://api.coindesk.com/v1/bpi/currentprice.json', function (data) {
      $('#cointime').text(data.time.updated)
      $('#dollar').text('USD :   ' + data.bpi.USD.rate)
      $('#gbp').text('GBP :   ' + data.bpi.GBP.rate)
      $('#euro').text('EUR :   ' + data.bpi.EUR.rate)
      timeout = null
    })
  }

  if (timeout) {
    clearTimeout(timeout)
  }

  timeout = setTimeout(load, 2500)
}

document.getElementById('refreshBtn').addEventListener('click', refresh)

setTimeout到另一个JS函数里面

3 个答案: