数据表全局搜索偶尔抛出 ajax 错误

Question

我有 2 个页面，上面分别有 3 个和 4 个数据表。

我需要用一个全局搜索框替换每个数据表的默认搜索框。

到目前为止，我已经很好地实现了这一点，我设置了全局搜索框并隐藏了各个搜索框，如下所示：

//Other JS to initialise datatables with Ajax serverside processing

$(".dataTables_filter").hide();

$("#datatable-search").keyup(function() {
    $(".dataTable").DataTable().search($(this).val()).draw();
});

数据表正在使用 ajax 调用来加载信息服务器端。

当它只有一个数据表时，我没有遇到这个问题，但是通过对所有数据表进行全局搜索，我偶尔会遇到 ajax 错误 - 由 500 错误服务器端引起。使用开发人员工具控制台，我可以看到哪些调用失败了，但之后我可以 open/run 它们就好了。

该项目使用 Laravel 所以检查 Laravel 日志，我看到了这个：

[2017-11-06 00:03:50] production.ERROR: No application encryption key has been specified.

这表明我没有在我的 .env 文件中设置应用程序密钥 - 但是，我已经设置了。我的应用程序的其余部分工作正常，即使打字慢也工作正常 - 似乎是通话量导致这种情况发生，但我不明白为什么......

只需快速按退格键几次，我就可以很容易地重现问题。

我可以将错误重定向到控制台，但我想先尝试解决错误。该错误目前只出现在我的本地环境中，我还没有在生产环境中尝试过 - 尽管我认为我会遇到类似的问题。

我考虑过在搜索当前 keyup 完成之前禁用文本输入，但这是非常具有侵入性的，并且对用户体验不太友好。

解决此问题的最佳方法是什么？有办法 'queue' 增加 ajax 电话吗？

Answer 1

给用户一些时间来输入。

// Typing timeout
var typingTimeout = null;
// On keyup
$("#datatable-search").keyup(function() {
    // Clear previous timer
    clearTimeout(typingTimeout);
    // Set a new timer
    var that = this;
    typingTimeout = setTimeout(function(){
        $(".dataTable").DataTable().search($(that).val()).draw();
    }, 200); // Execute the search if user paused for 200 ms
});

编辑：更正了小错误。

数据表全局搜索偶尔抛出 ajax 错误

Datatable global search throwing occasional ajax error

php

datatable

jquery

laravel

laravel-5.5