javascript 在 select2 插件中引入 ajax 调用时的延迟
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18174935/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Introducing delay while ajax call in select2 plugin
提问by SharpCoder
I am using select 2 example from http://ivaynberg.github.io/select2/I am using "Loading Remote Data" example in this page.
我正在使用来自http://ivaynberg.github.io/select2/ 的select 2 示例 我在此页面中使用“加载远程数据”示例。
Problem: As soon as I type a letter, system makes an ajax call. I want to introduce delay of 1 second during this request which will allow the user to type his search string.
问题：只要我输入一个字母，系统就会进行ajax调用。我想在此请求期间引入 1 秒的延迟，这将允许用户键入他的搜索字符串。
I am adding code from the site. Please let me know how to introduce delay.
我正在从站点添加代码。请让我知道如何引入延迟。
("#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
});
回答by talsibony
I guess quietMillis property was changed to delay in newer versions of select2:
我想在 select2 的较新版本中，quietMillis 属性已更改为延迟：
https://select2.org/data-sources/ajax#rate-limiting-requests
https://select2.org/data-sources/ajax#rate-limiting-requests
$('select').select2({
ajax: {
url: '/example/api',
delay: 250
}
});
回答by lpiepiora
The answer to your question is in the actual example you've pointed us to:
您问题的答案在您向我们指出的实际示例中：
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};
}
},
just change the quietMillisto something bigger, as the documentation says:
只需将其更改quietMillis为更大的内容，如文档所述：
quietMillis - Number of milliseconds to wait for the user to stop typing before issuing the ajax request
quietMillis - 在发出 ajax 请求之前等待用户停止输入的毫秒数
回答by Bartek
Using a utility tool like underscore.jsgives you the ability to use some cool features, like debounce!
使用像underscore.js这样的实用工具可以让你使用一些很酷的功能，比如debounce!
This exactly solves your problem. debouncewill postpone its execution until waitmilliseconds. You can find more info at the underscore docs
这正好解决了你的问题。debounce将其执行推迟到等待毫秒。您可以在下划线文档中找到更多信息
回答by jcubic
You can use setTimeout function:
您可以使用 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);
},
