Javascript 数据表fnFilter延迟加载程序/指示器

我正在使用datatables和我从

fnSetFilteringDelay

获得的自定义插件，但我想添加一个指示符或某种类型的加载器，告诉用户何时搜索过滤器文本框中键入的文本。我已经做过了，但有点不对劲，也许有人能帮我把这句话说得流利漂亮

但是如果你输入的越来越多，指示条开始看起来像是在破碎

如果可能的话，我想去掉破碎的部分

这是我将datatables初始化为变量oTable后的代码

oTable.fnSetFilteringDelay(550); //After the last character is entered, will take 550 milliseconds to search
$('#gvProjectList_filter input').parent().append($("<div id='lder' style='width: 0px; height: 30px; background-color: #999; float:right;'></div>"));
$('#gvProjectList_filter input').on('keyup', function (a) {
    document.getElementById("lder").style.width = "50px"; //Start the indicator at 50px and end at 0px
    var count = 550; //Same as the filtering delay set above

    var counter = setInterval(timer, 25); //will run it every 25 millisecond
    function timer() {
        count -= 25; //Minus 25 milliseconds
        if (count <= 0) {
            clearInterval(counter);
            document.getElementById("lder").style.width = "0px";
            return;
        }
        var neww = parseInt((count / 550) * 50); //calculate the new width vs. time left of 550ms
        document.getElementById("lder").style.width = neww + "px";
    }
});

oTable.fnSetFilteringDelay（550）//输入最后一个字符后，搜索将花费550毫秒
$（'#gvProjectList_filter input'）.parent（）.append（$（“”）；
$（'#gvProjectList_filter input'）。在（'keyup'，函数（a）上{
document.getElementById（“lder”）.style.width=“50px”//从50px开始指示器，到0px结束指示器
var count=550；//与上面设置的过滤延迟相同
var counter=setInterval（计时器，25）；//将每25毫秒运行一次
函数计时器（）{
计数-=25；//减去25毫秒
如果（count我找到了自己的解决方案。我使用了jquery的animate函数

oTable.fnSetFilteringDelay(550);
$('#mytable_filter input').parent().append($("<div id='lder' style='width: 0px; height: 20px; background-color: #999; float:right;'></div>"));
$('#mytable_filter input').on('keyup', function (a) {
    $("#lder").width('50px');
    $("#lder").stop().animate({width:'0px'},550);
});

oTable.fnSetFilteringDelay（550）；
$（'#mytable_筛选器输入'）.parent（）.append（$（“”）；
$（'#mytable_filter input'）。在（'keyup'，函数（a）上{
$（“#lder”）.width（'50px'）；
$（“#lder”）.stop（）.animate（{width:'0px'}，550）；
});

工作起来很有魅力


，看看

我只能说：太棒了！