搜索栏 - 使用 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/paste' 后 1 秒执行。 :D

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

Search bar - Add content Dynamicly with Ajax and JQuery

javascript

ajax

search

jquery