需要延遲複選框的訂單

Question

我需要將此複選框腳本延遲1-2秒，然後才能更改已檢查項目的順序和方式。

<ul> 
<li><label><input type="checkbox" id="one" />One</label></li> 
<li><label><input type="checkbox" id="two" />Two</label></li> 
<li><label><input type="checkbox" id="three" />Three</label></li> 
<li><label><input type="checkbox" id="four" />Four</label></li> 
<li><label><input type="checkbox" id="five" />Five</label></li> 
</ul> 

腳本

var list = $("ul"), 
    origOrder = list.children(); 

list.on("click", ":checkbox", function() { 
    var i, checked = document.createDocumentFragment(), 
     unchecked = document.createDocumentFragment(); 
    for (i = 0; i < origOrder.length; i++) { 
     if (origOrder[i].getElementsByTagName("input")[0].checked) { 
      checked.appendChild(origOrder[i]); 
     } else { 
      unchecked.appendChild(origOrder[i]); 
     } 
    } 
    list.append(checked).append(unchecked); 
}); 

試圖把一個計時器，但失敗了......

Answer 1

不完全肯定什麼期望的結果是，雖然你可以.prependTo()，.append()，setTimeout()

var list = $("ul"), 
 
    origOrder = list.find("li"), 
 
    duration = 1000, 
 
    timeout = null; 
 

 
list.on("click", ":checkbox", function() { 
 
    if (timeout) clearTimeout(timeout); 
 
    var i, checked = [], 
 
     unchecked = []; 
 
    for (i = 0; i < origOrder.length; i++) { 
 
     if (origOrder.eq(i).find(":checked").length) { 
 
      checked.push(origOrder[i]); 
 
     } else { 
 
      unchecked.push(origOrder[i]); 
 
     } 
 
    } 
 
     timeout = setTimeout(function() { 
 
     $(checked).prependTo(list); 
 
     list.append(unchecked); 
 
     }, duration) 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<ul> 
 
<li><label><input type="checkbox" id="one" />One</label></li> 
 
<li><label><input type="checkbox" id="two" />Two</label></li> 
 
<li><label><input type="checkbox" id="three" />Three</label></li> 
 
<li><label><input type="checkbox" id="four" />Four</label></li> 
 
<li><label><input type="checkbox" id="five" />Five</label></li> 
 
</ul>

Answer 2

下面是一些解決方案，包含移動項目的一些淡入淡出動畫。我也改變了一些代碼，而不是使用DOM方法jQuery的

$(function() { 
 
    var $list = $('ul'); 
 
    var $items = $list.children(); 
 
    var timer = -1; 
 

 
    function reorder() { 
 
     $items.each(function() { 
 
      if ($(this).find('input:checkbox:checked').length) { 
 
       $list.append($(this)); 
 
      } 
 
     }); 
 
     $items.each(function() { 
 
      if ($(this).find('input:checkbox:not(:checked)').length) { 
 
       $list.append($(this)); 
 
      } 
 
     }); 
 
    } 
 
    
 
    $list.on("click", ":checkbox", function() { 
 
     var $item = $(this).closest('li'); 
 
     clearTimeout(timer); // cancel previous timeout 
 
     timer = setTimeout(function() { 
 
      // fade out clicked item 
 
      $item.fadeOut(400, function() { 
 
       // when faded out, reorder the items 
 
       reorder(); 
 
       // fade in clicked item at its new position 
 
       $item.fadeIn(400); 
 
      }); 
 
     }, 500); 
 
    }); 
 
    
 
    // At page load, also reorder, as some browsers retain previous checkmarks 
 
    reorder(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
<li><label><input type="checkbox" id="one" />One</label></li> 
 
<li><label><input type="checkbox" id="two" />Two</label></li> 
 
<li><label><input type="checkbox" id="three" />Three</label></li> 
 
<li><label><input type="checkbox" id="four" />Four</label></li> 
 
<li><label><input type="checkbox" id="five" />Five</label></li> 
 
</ul>