jQueryとJavaScriptでドラッグ＆ドロップで実行している条件を確認した後、タイムアウト機能をリセットする方法

Question

特定の番号を確認した後、タイムアウト機能をリセットしようとしています。

私はdroppableボックスを持っています、ここで私はいくつかのdraggableを落としていますli。私はtimeout機能で10秒間の時間を設定しました。

落ちたリチウム番号が5より大きいかどうかを確認したい場合は、timeout機能が再びリセットされます。

この方法では、ユーザーが10秒ごとに5つの数字を完了すると、10秒後に続行します。この時間内に完了できない場合はメッセージが表示されます。あなたはこのような状況のために他のソリューションを持っている場合は

<div class="wrapper"> 
<ul class='lists'> 
<li>01</li> 
<li>02</li> 
<li>03</li> 
<li>04</li> 
<li>05</li> 
<li>06</li> 
<li>07</li> 
<li>08</li> 
<li>09</li> 
<li>10</li> 
</ul> 
    <div class="dropbox"> 
     drop here 
    </div> 
    <div class="timeover"> 
    time over 
    </div> 
</div> 


// ------------------- script ------------------- 
    $(document).ready(function(){ 
    var timeframe = 10000; 
    // ----------- draggable ------------- 
    $(".lists li").draggable({ 
    revert:true 
    }); 
    // -------------- drop function ------------ 
    $(".dropbox").droppable({ 
    drop: function() { 
    // ------------- 
    var dragelem = $('.ui-draggable-dragging'); 
    $(dragelem).addClass('dropped'); 
    var scoreCard = $(".dropped").length; 
    } 
}); 
setTimeout(function(){ 
     $('.timeover').addClass('show'); 
},timeframe); 
}); 

クリックhere

：ここ

はフィドルリンクです。

Answer 1

あなたは、いくつかの変数にあなたのタイムアウトを割り当てる必要があり、その後、次のことができます。

var timerId = setTimeout(...); 
clearTimeout(timerId); 

それはあなたが必要なの半分だが、その後、あなたは再びそれを再割り当てするか、他のものを行うことができます