javascript - 单个列搜索上的数据表设置间隔函数

Question

我正在使用数据表 jquery 插件(https://datatables.net/)，除了当我尝试延迟搜索各个列时，一切正常。

此代码有效但没有延迟

table.columns().indexes().each( function (idx) {
        $( 'input', table.column( idx ).footer() ).on( 'keyup change', function () {
            console.log(idx);
            console.log(this.value);
            table.column( idx ).search(this.value).draw();
            fixedColumns.fnRedrawLayout();
        } );
    } );

但是当我尝试使用 .. 实现搜索延迟(这使用服务器端处理)时

table.columns().indexes().each( function (idx) {
        $( 'input', table.column( idx ).footer() ).on( 'keyup change', function () {
            searchWait = 0;
            var searchstring = this.value;
            if(!searchWaitInterval) searchWaitInterval = setInterval(function(e){
                if(searchWait>=3){
                    clearInterval(searchWaitInterval);
                    searchWaitInterval = '';
                    var table = $('#example').dataTable();
                    console.log(idx);
                    console.log(searchstring);
                    table.column( idx ).search(searchstring).draw();
                    fixedColumns.fnRedrawLayout();
                    searchWait = 0;
                }
                searchWait++;
            },200);
        });
    });

出现以下错误

TypeError: table.column is not a function
table.column( idx ).search(searchstring).draw();

任何人都可以阐明这一点吗？

Answer 1

在这里找到解决方案 http://mattsnider.com/jquery-function-for-change-event-and-delayed-keydown-event/

$.fn.changeOrDelayedKey = function(fn, iKeyDelay, sKeyEvent) {
var iTimeoutId,
    oEventData;

if (!$.isFunction(fn)) {
    oEventData = arguments[0];
    fn = arguments[1];
    iKeyDelay = arguments[2];
    sKeyEvent = arguments[3];
}

if (!iKeyDelay || 0 > iKeyDelay) { iKeyDelay = 500; }

if (!sKeyEvent || !this[sKeyEvent]) { sKeyEvent = 'keydown'; }

function fnExecCallback() {
    clearTimeout(iTimeoutId);
    fn.apply(this, arguments);
}

function fnDelayCallback() {
    var that = this,
        args = arguments;
    clearTimeout(iTimeoutId);
    iTimeoutId = setTimeout(function() {
        fnExecCallback.apply(that, args);
    }, iKeyDelay);
}

if (oEventData) {
    this.change(oEventData, fnExecCallback);
    this[sKeyEvent](oEventData, fnDelayCallback);
}
else {
    this.change(fnExecCallback);
    this[sKeyEvent](fnDelayCallback);
}

return this;
};

我的用法如下:-

    table.columns().indexes().each( function (idx) {
        $('input', table.column( idx ).footer() ).changeOrDelayedKey( table ,function(e) {
            table.column( idx ).search(this.value).draw();
            fixedColumns.fnRedrawLayout();
        }, 500, 'keyup');
    });