在 select2 插件中调用 ajax 时引入延迟

Posted 2023-05-07

【中文标题】在 select2 插件中调用 ajax 时引入延迟

【英文标题】：Introducing delay while ajax call in select2 plugin

【发布时间】：2013-08-13 01:16:16

【问题描述】：

我正在使用来自 http://ivaynberg.github.io/select2/ 的 select 2 示例 我在此页面中使用“加载远程数据”示例。

问题：只要我输入一个字母，系统就会进行 ajax 调用。我想在这个请求期间引入 1 秒的延迟，这将允许用户输入他的搜索字符串。

我正在从网站添加代码。请告诉我如何引入延迟。

("#e6").select2(
            placeholder: "Search for a movie",
            minimumInputLength: 1,
            ajax:  // instead of writing the function to execute the request we use Select2's convenient helper
                url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
                dataType: 'jsonp',
                data: function (term, page) 
                    return 
                        q: term, // search term
                        page_limit: 10,
                        apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
                    ;
                ,
                results: function (data, page)  // parse the results into the format expected by Select2.
                    // since we are using custom formatting functions we do not need to alter remote JSON data
                    return results: data.movies;
                
            ,
            initSelection: function(element, callback) 
                // the input tag has a value attribute preloaded that points to a preselected movie's id
                // this function resolves that id attribute to an object that select2 can render
                // using its formatResult renderer - that way the movie name is shown preselected
                var id=$(element).val();
                if (id!=="") 
                    $.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies/"+id+".json", 
                        data: 
                            apikey: "ju6z9mjyajq2djue3gbvv26t"
                        ,
                        dataType: "jsonp"
                    ).done(function(data)  callback(data); );
                
            ,
            formatResult: movieFormatResult, // omitted for brevity, see the source of this page
            formatSelection: movieFormatSelection,  // omitted for brevity, see the source of this page
            dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
            escapeMarkup: function (m)  return m;  // we do not want to escape markup since we are displaying html in results
        );

【问题讨论】：

您不能检查用户输入的字符数，而不是添加延迟？例如：检查天气用户在发送请求之前输入了超过 3 个字符吗？

【参考方案1】：

我猜 quietMillis 属性在 select2 的较新版本中被更改为延迟：

https://select2.org/data-sources/ajax#rate-limiting-requests

$('select').select2(
  ajax: 
    url: '/example/api',
    delay: 250
  
);

【讨论】：

这是当前正确的答案，我假设将正确的链接添加到文档中。不知道为什么这个重要的配置没有清楚地记录在...在配置的常规文档中。

【参考方案2】：

您的问题的答案在您向我们指出的实际示例中：

ajax: 
    url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
    dataType: 'jsonp',
    quietMillis: 100, // <----------- HERE change it to 1000
    data: function (term, page) 
        return 
            q: term, //search term
            page_limit: 10,
            page: page,
            apikey: "ju6z9mjyajq2djue3gbvv26"
        ;
    ,
    results: function (data, page) 
        var more = (page * 10) < data.total;
        return results: data.movies, more: more;
    
,

只需将 quietMillis 更改为更大的值，如文档所述：

quietMillis - 在发出 ajax 请求之前等待用户停止输入的毫秒数

【讨论】：

感谢您的快速帮助

talsibony 的回答现在有效。 quietMillis 无法使用新版本

同意这似乎是特定于版本的。 quietMillis 受到尊重，但 select2 3.5.2 中没有延迟。

【参考方案3】：

使用underscore.js 之类的实用工具可以让您使用一些很酷的功能，例如debounce！

这正好解决了您的问题。 debounce 将推迟执行直到 wait 毫秒。你可以找到更多信息at the underscore docs

【讨论】：

是的，但你不能真正进入 select2 内部使用它。

【参考方案4】：

你可以使用 setTimeout 函数：

var timer;
...
        initSelection: function(element, callback) 
            clearTimeout(timer);
            var id=$(element).val();
            timer = setTimeout(function() 
                if (id!=="") 
                    $.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies/"+id+".json", 
                        data: 
                            apikey: "ju6z9mjyajq2djue3gbvv26t"
                        ,
                        dataType: "jsonp"
                    ).done(function(data)  callback(data); );
                
            , 1000);
        ,