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>