如何在jQuery中做到这一点

Question

我想将此代码从javascript转换为jQuery。

这是当前的代码：

var i = 0;
    var start = true;
    document.getElementById("startclick").addEventListener("click", function() {
        if (start) {
            start = false;
            interval = setInterval(function() {
                i++;
                document.getElementById('list').innerHTML += "albastru_" + i + '<br>' ;
            }, 3000);
        } else {
            start = true;
            clearInterval(interval);
        }
    });

这是我的尝试：

$x = 0; 
$start = true; 
$(document).ready(function () { 
  $('#buton2').on('click',function () { 
     if($start){ 
       $start = false; 
       $interval = setInterval(function () { 
          $x ++; 
          $('#list').html('<p>albastru_</p>' + $x + '<br>'); }, 1000); 
       } else { 
          $start = true; 
          clearInterval($interval); 
       } 
   }) 
}); 

Answer 1

您可以做以下类似的事情。我假设startclick是一个按钮，单击它后.append()将在3秒后将所需的数据添加到#list DIV。

使用开始和停止按钮更新答案。

var i = 0;
var start = true;
var interval = null;
$('#startclick').click(function() {
  if (interval !== null) return;
  interval = setInterval(function() {
      i++;
      $('#list').append("albastru_" + i + '<br>');
  }, 3000);  
});
$("#stop").click(function() {
  clearInterval(interval);
  interval = null;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="list">
</div>
<br />
<button id="startclick">START!</button>
<button id="stop">STOP!</button>