使用JS/html控制/延迟Shiny DT数据表的搜索速度

Question

我有一个应用程序，它有一个非常大的Shiny DT表，我已经成功地使用JS/html实现了数据表的批量搜索(在本例的帮助下(。据我所知，该表是实时搜索的，例如，如果我想在表中查找以"开头的项目；Ver"；，一旦我开始键入，搜索就在我键入第一个字母后开始，所以我必须慢慢等待以"开头的项目；V"；首先出现，然后等待所有具有"；Ve"；，然后最后"；Ver"；。对于下面的简短示例来说，这不是一个问题，但对于一些用户的操作系统和包含许多条目的非常大的表来说，这是一个问题。

总之，我不想每次用户按键时都进行搜索，我想在用户停止键入x秒时进行搜索。根据这篇帖子，我认为这被称为去抖动？

有人能告诉我这是否可能吗？或者建议一个替代方案来解决我的问题？

我在下面包含了一个可复制的例子，它是从我当前的应用程序中修改而来的，运行得很好(除了搜索和更新表格的速度较慢之外(。

library(shiny)
library(DT)
callback <- '
$("div.search").append($("#mySearch"));
$("#mySearch").on("keyup redraw", function(){
var splits = $("#mySearch").val().split(" ").filter(function(x){return x !=="";})
var searchString = "(" + splits.join("|") + ")";
table.search(searchString, true).draw(true);
});
'
ui <- fluidPage(
tags$head(tags$style(HTML(".search {float: right;}"))),
br(),
tags$input(type = "text", id = "mySearch", placeholder = "Search"),
DTOutput("dtable")
)
server <- function(input, output){
output[["dtable"]] <- renderDT({
datatable(
iris[c(1,2,51,52,101,102),],
options = list(
dom = "l<'search'>rtip"
),
callback = JS(callback)
)
}, server = FALSE)
}
shinyApp(ui, server)

> sessionInfo()
R version 4.0.0 (2020-04-24)
Platform: x86_64-apple-darwin17.0 (64-bit)
Running under: macOS Catalina 10.15.6
Matrix products: default
BLAS:   /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/4.0/Resources/lib/libRlapack.dylib
locale:
[1] en_GB.UTF-8/en_GB.UTF-8/en_GB.UTF-8/C/en_GB.UTF-8/en_GB.UTF-8
attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     
other attached packages:
[1] DT_0.13       shiny_1.4.0.2
loaded via a namespace (and not attached):
[1] Rcpp_1.0.4.6      digest_0.6.25     later_1.1.0.1     mime_0.9         
[5] R6_2.4.1          jsonlite_1.6.1    xtable_1.8-4      magrittr_1.5     
[9] evaluate_0.14     rlang_0.4.6       promises_1.1.0    rmarkdown_2.2    
[13] tools_4.0.0       htmlwidgets_1.5.1 crosstalk_1.1.0.1 rsconnect_0.8.16 
[17] fastmap_1.0.1     httpuv_1.5.4      xfun_0.14         yaml_2.2.1       
[21] compiler_4.0.0    htmltools_0.4.0   knitr_1.28  

Answer 1

您可以使用setTimeout来延迟搜索。此处为1秒(1000ms(：

callback <- '
$("div.search").append($("#mySearch"));
$("#mySearch").on("keyup redraw", function(){
var splits = $("#mySearch").val().split(" ").filter(function(x){return x !=="";})
var searchString = "(" + splits.join("|") + ")";
setTimeout(function(){
table.search(searchString, true).draw(true);
}, 1000);
});
'