搜索栏-使用Ajax和JQuery动态添加内容

Question

我正在尝试制作一个动态加载内容的搜索栏。

然而，我希望真正的内容加载在用户结束键入后开始。

我尝试了这个版本，但它不起作用，因为它没有考虑到每个事件"；keyup"；。

let old_search = ""
let search = ""

$("#search_input").on('keyup paste',function(){
$("#loader_active").show()
$('#videos').empty()

let old_search = $("#recherche").val()
setTimeout(function (){
search = $("#search_input").val()
console.log(old_search + ">" + search)
if (search == old_search){
console.log("loading")
start = 0;
limit = 20;
load(search, start, limit);
start += limit;
}
}, 1000);
});
function load(search, start=0, limit=20) {
$("#loader_active").show()
let form_data = new FormData();
form_data.append('search', search);
form_data.append('start', start);
form_data.append('limit', limit);

$.ajax({
url: "http://website.com/ajax/videos.php",
contentType: false,
dataType: "json",
processData: false,
cache: false,
data: form_data,
type: 'POST',
success: function (data) {
$(data).each(function(index, value) {
showVideo(value) // show video creates divs with jquery     containing the data from the json received by the ajax call
})
$("#loader_active").hide()
}
})
}

有人知道解决办法吗？

Answer 1

您可以做的是使函数重置一个触发器，该触发器将在x时间后触发。类似于：

function myCoolFunction(myParameters) {
//Clear the timeout every time this happens
clearTimeout(window.myTimeout);
//Create a new timeout
window.myTimeout = setTimeout(function() {
//Do Something after 1 second
}, 1000);
}
$(".selector").on('keyup paste', function (){
myCoolFunction(myParameters);
});

这将在最后一个"keyup/poste"后1秒执行。：D