需要延迟复选框顺序

时间:2016-05-30 18:52:33

标签: javascript sorting checkbox timer delay

在更改已检查项目的顺序和方式之前,我需要将此复选框脚本延迟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);
});

试图打开计时器,但失败了......

2 个答案:

答案 0 :(得分:0)

虽然您可以.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>

答案 1 :(得分:0)

这是一个带有移动项目的淡入淡出动画的解决方案。我还改了一些代码来使用jQuery代替DOM方法

$(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>