javascript - 当用户停止写入时发送 XMLHttpRequest

Question

我只想在用户停止写入时发送请求...我似乎已经通过 (str.length > 3) 停止了额外的垃圾邮件。但我需要的是当用户停止编写此脚本时获取输入值并将其转发。

这是现在更新的代码。

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};


var server = window.location.hostname;
var pathname = window.location.href.split('/');
pathname = (pathname[3]);
var myEfficientFn = debounce(function() {
function showHint(str) {
    if (str.length === 0) { 
        document.getElementById("search-search"suggest-home").innerHTML = "";
    } if (str.length > 3)  {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
               // this.responseText;
                var repox = JSON.parse(this.responseText);
                var wrapper = document.getElementById("search-search"suggest-home");
                var myhtml = '<ul>';'<ul style="margin-bottom: 0;min-width: 296px;">';
                for (var i = 0; i < repox.length; i++) {
                var repo = repox[i];
                console.log(repo.url);
                if(repo.type == "breakJios12""ios11"){
                myhtml += '<p>'+ repo.2212+'</p>';"<li>";

                }
                if(repo.type == "breakJios11""ios"){
                myhtml += '<p>'+ repo.2213+'</p>';"<li>";
                }
                }
                myhtml += '<li class="ss-bottom" style="padding: 0; border-bottom: none;"><a href="https://'+  server +'/?s='+encodeURIComponent(str).replace('%20','+')+'" id="suggest-all">View all</a></li>';

                wrapper.innerHTML = myhtml;
            }else {
    // Check back again 1 sec later
    setTimeout(checkState, 1000);
  }
        };
        xmlhttp.open("GET", "https://"+ server +"/test/"+str, true);
        xmlhttp.send();


    }
}
window.onload = showHint(str);
}, 250);
window.addEventListener('resize', myEfficientFn);

编辑感谢@Emilel Zuurbier代码现在可以运行

Answer 1

很高兴您添加了去抖动功能，尽管它需要一些修改。我将尝试解释您应该如何使用它以及代码中会发生什么。

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

创建一个用于处理 onkeyup 事件的函数。在您的情况下，它是 showHint 函数。将参数 event 替换为参数 str，该参数将是由 onkeyup 事件创建的 Event 对象。

function showHint(event) {
    var content = event.target.value;
    // do something with the content
}

现在创建 showHint 函数的去抖版本。
debounce 函数返回另一个函数，该函数将在用户停止按键后 250 毫秒执行 showHint 函数。这一切都与closures有关.

var debounceShowHint = debounce(showHint, 250);

将 debounceShowHint 绑定(bind)到 onkeyup 事件属性，并为其提供 event 参数，该参数将传递给您的 showHint 函数。

<input onkeyup="debounceShowHint(event)">