1

在我为工作而构建的网站上，我们有一个搜索栏，用户可以在其中输入以搜索存储在一组元素的数据中的各种字段。当他们开始打字时，问题出现在较慢的浏览器中。

我试图做的是以下，使用 jQuery Deferred 对象：向输入框添加一个按键处理程序。当 keyup 被触发时，解决任何先前触发的仍处于“未决”状态的 keyup。然后继续使用当前的 keyup 事件。在 keyup 事件本身内部，它根据输入值进行所有匹配，它总是检查当前事件是否仍然未决，如果不是，它应该跳过该事件的其余部分。

问题似乎是，即使使用像 IE7 这样的慢速浏览器，每个 keyup 事件都是阻塞的。因此，如果用户输入“testing”，它会尝试在看到“te”的 keyup 事件之前完成“t”字符的整个事件，依此类推。

那么问题就变成了，我怎样才能使 keyup 事件异步/非阻塞，或者这几乎是不可能的？

一个例子：

var search_values = new Array();
var deferred_searches = {};

function filterSearchResults(event) {
    var input_element = jq(event.target);
    var search_value = input_element.val();
    console.log('user just typed final letter in :' + search_value);
    for (var svi = 0; svi < search_values.length-1; svi++) {
        if (deferred_searches[search_values[svi]] !== undefined &&
            deferred_searches[search_values[svi]].state() == 'pending') {
            console.log('resolving ' + search_values[svi])
            deferred_searches[search_values[svi]].resolve(search_values[svi]);
        }
    }

    var result_list = jq('div#header_project_selection_result_list');
    var all_project_results = result_list.find('div.header_project_result');

    console.log('beginning search for "'+search_value+'"');
    if (search_value == '') {
        // Blank input value means show all results
    }
    else {
        // Non-blank value means search
        if (! startSearchFilter(search_value, all_project_results)) {
            return false; // this should return out of this current event handler
        }
    }
    console.log('ending search for "'+search_value+'"');
},

/**
 * Helper function that actually handles finding and hiding/showing results,
 * and highlighting found text.
 *
 * Uses jQuery for this functionality.
 *
 * @param       search_value                            string              The text the user has input
 * @param       all_project_results                     jQuery              A jQuery extended array of all project results to filter
 *
 * @return      tbr                                     boolean             Flag indicating whether the search was short circuited
 */
function startSearchFilter(search_value, all_project_results) {
    var tbr = true;

    search_values.push(search_value);
    deferred_searches[search_value] = jq.Deferred();
    deferred_searches[search_value].done(function(sv) {
        search_values = search_values.without(sv);
        console.log('done deferred search for "'+sv+'" - disabling');
    });

    var number_of_results_found = 0;
    var pr_count = all_project_results.length - 1;
    var regexp = new RegExp(search_value, 'im');
    for (var index = 0; index <= pr_count; index++) {
        if (deferred_searches[search_value].state() == 'pending') {
            // KEEP GOING
            var ext_project_result = all_project_results.eq(index);
            var result_data = ext_project_result.data();

            //console.log(search_value+" is in state '"+deferred_searches[search_value].state()+"'.....' all_project_results.each() [inside]");
            if (result_shown) {
                number_of_results_found++;
                // The input text has been found on data for the current project, so make sure we show that result row
                ext_project_result.addClass('filtered');
            }
            else if (ext_project_result.hasClass('filtered')) {
                // The input text has not been found, or the user is not an admin and can't view it, so hide that row
                ext_project_result.removeClass('filtered');
            }
            continue; // keep going to the next result element
        }
        else {
            tbr = false;
            break; // break when short circuited
        }
    }
    if (deferred_searches[search_value].state() == 'pending') {
        deferred_searches[search_value].resolve(search_value); // explicitly resolve this finalized one
    }

    return tbr;
}

理论上这应该可行，但正如我所提到的，它似乎总是阻塞。

4

1 回答 1

2

而不是做你正在做的事情，你可能想研究一个叫做“去抖动”的概念，它基本上允许你创建一个可以多次调用的函数，但只有在它没有被调用一定数量时才会完全执行的时间。

（以下代码片段来自 underscore.js ）

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
var debounce = function(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) {
                func.apply(context, args);
            }
        };
        if (immediate && !timeout) {
            func.apply(context, args);
        }

        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
};

使用它，你可能会做这样的事情，它只会在用户停止输入 500 毫秒后执行我们昂贵的回调

$( "#searchbox" ).keyup( debounce(function() {
    // Some expensive operation here
}, 500));

Ben Alman 提供了一个很好的插件（http://benalman.com/projects/jquery-throttle-debounce-plugin/），如果您使用它们，LoDash/Underscore 提供相同的功能。

于 2012-09-22T04:08:50.620 回答