js回调遇到的一个问题

柔光的暖阳◎ 2022-01-30 00:53 166阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70][]

在用datatables插件扩展的responsive和select时，我用了如下设置的选项，

select: {
        style: "multi",
        items: "row",
        selector: "td:nth-child(2)"
    },
    responsive: {
        details: {
            type: 'inline',
        }
    },

也自己写了一个点击的监听事件，在这个点击事件的回调里，我想判断是否所有的行都被点击了，然后让全选被选中。但是由于datatables本身也根据我的选项配置写了如下的监听回调，导致**.selected**的length一直不能等于5。这相当于一个监听事件同时有了两个回调函数，datatables的回调用来给tr添加.selected样式，而我的回调用来统计selected的对象个数。导致的问题就是我不能在datatables回调执行完后再执行我的回调，所以两边的值永远不会相等。

$("#example").on("click", "tbody tr td:nth-child(2)", function (e) {
        if ($("#example tbody tr.selected").length == $("#example tbody tr").length) {
            $("#tableCheckAll").attr("checked", true);
        } else {
            $("#tableCheckAll").attr("checked", false);
        }
    });

解决的思路就是让我的回调比datatables的回调慢点执行，这就用到了setTimeOut()，这样我的回调执行时就会比datatables的回调慢一步了。

$("#example").on("click", "tbody tr td:nth-child(2)", function (e) {
        setTimeout(function () {
            if ($("#example tbody tr.selected").length == $("#example tbody tr").length) {
                $("#tableCheckAll").attr("checked", true);
            } else {
                $("#tableCheckAll").attr("checked", false);
            }
        }, 1)
    });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTM0MDY2_size_16_color_FFFFFF_t_70]: /images/20220130/b503f67f924940d1b3744d2bcd57832c.png