如何在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格。

更新了與開始和停止按鈕的答案。

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>