实时搜索

实时搜索的优化分为两个方面

1. 减少请求次数(节流，throttle)

2. 取消上一次请求

   ajax请求是异步的，发送请求时是按照先后顺序，但由于每个请求的响应数据量不同，返回结果的顺序是难以预料的，可能导致出现最终想要的搜索结果被之前的请求返回结果覆盖的情况。

   为了解决上述问题，我们需要让返回的结果也有个先后顺序，即先请求的先返回，如果在发送下一次请求时，上一次请求还没结束，那么就取消上一次的发送请求。

var xhr;
function serachHandler() {
    var serachText = input.value.trim();

    // 请求是有顺序的, 但返回结果的顺序则是不可控的(数据量大小等因素)
    // 在发下一次请求前, 如果上一次的请求还没有结束, 那么取消上一次请求
    // 这样就避免了因返回结果顺序不对而导致搜索结果被覆盖的问题
    if (xhr && xhr.readyState !== 4) {
        xhr.abort();
    }
    xhr = $.ajax({
        url: '',
        type: '',
        dataType: '', // 返回类型预期
        data: {
            q: searchText
        },
        success (res) {

        },
        error (err) {
        }
    })
}

function throttle (fn, delay) {
    var timer = null;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    }
}

var delay = 300;
var throttleSearch = throttle(serachHandler, dealy);

search.on('input', throttleSearch);