搜索onkeyup太低效了吗?

时间:2015-03-07 05:50:42

标签: javascript jquery onkeyup

我有这个表格,管理员搜索一个玩家列表,我在他搜索时就这样做了,onkeyup上运行一个php脚本,搜索他输入的%string%。像谷歌这样的东西。

如果管理员快速输入名称,我想知道这是不是很糟糕。或者如果它可以被滥用到" flood"服务器。我在共享服务器上运行,最多可以运行15个进程。

如果是这样,解决此问题的最佳方法是什么?我想在搜索之间添加1秒限制器。还有其他想法吗?

function getusers()
{
    var whou = ($("#who").val());

    $("#theadmins").load("searchusers.php", {who : whou});
}

<input id=\"who\" onkeyup=\"getusers()\" class=\"\" type=\"text\"  placeholder=\"username\" width=\"100\" maxlength=\"32\" size=\"32\" />

3 个答案:

答案 0 :(得分:1)

我还在应用程序中应用了自动建议,并通过雷米锐利进行了限制功能。

// https://remysharp.com/2010/07/21/throttling-function-calls
function debounce(fn, delay) {
    var timer = null;
    return function () {
       var context = this, args = arguments;
       clearTimeout(timer);
       timer = setTimeout(function () {
          fn.apply(context, args);
       }, delay);
    };
}

这就是我在keyup上应用的方式,ajax请求将在 500(miliseconds)之后触发,但是如果仍然预览请求发现然后使用中止前一个请求,就像你一样可以看到如下:

$('#search').keyup( debounce(function() {
    var currentRequest = null;
    var _q = $.trim( $(this).val() );

    // Only fire if value found in search box
    if( _q.length > 0 ) {
       currentRequest = $.ajax({
           url: '', 
           beforeSend: function() {
               // If found previous ajax request then kill and start new one
               if( currentRequest != null ) {
                   currentRequest.abort();
               }
           }, 
           dataType: 'json'
        });
    }
}, 500) );

答案 1 :(得分:1)

使用keyup:

Use keyup():

     $(function () {
    var minlength = 3;

    $("#sample_search").keyup(function () {
        var that = this,
        value = $(this).val();

        if (value.length >= minlength ) {
            $.ajax({
                type: "GET",
                url: "sample.php",
                data: {
                    'search_keyword' : value
                },
                dataType: "text",
                success: function(msg){
                    //we need to check if the value is the same
                    if (value==$(that).val()) {
                    //Receiving the result of search here
                    }
                }
            });
        }
    });
});

答案 2 :(得分:0)

而不是在用户输入时向服务器发出太多请求。您可以使用setTimeout作为一个选项来限制服务器调用次数。

但是,即使在服务器返回您之前请求的响应之前,如果setTimeout限制太低,您也可能会触发多个服务器请求。

我建议在keyup事件处理程序中使用一个标志。使用setTimeout触发第一个服务器调用后,等待服务器的响应并设置重置标志。因此,基于此,可以限制服务器请求的数量。

另一种方法是,当第一个keyup事件被触发时。在setTimeout中设置大约1s的延迟以获得更好的结果。

如果您要获取国家/地区列表或某些取决于搜索关键字的起始字母的东西。在这种情况下,我宁愿在第一次请求后缓存客户端中的数据。 (如果结果数量较少)。在后续请求中,将过滤客户端中的缓存数据并显示。