问题我可以延迟jquery的keyup事件吗？

我正在使用rottentomatoes电影API和twitter的typeahead插件使用bootstrap 2.0。我已经能够整合API，但我遇到的问题是在每个keyup事件之后调用API。这一切都很好，但是我宁愿在一个小暂停之后拨打电话，让用户先输入几个字符。

以下是我在keyup事件后调用API的当前代码：

    var autocomplete = $('#searchinput').typeahead()
    .on('keyup', function(ev){

        ev.stopPropagation();
        ev.preventDefault();

        //filter out up/down, tab, enter, and escape keys
        if( $.inArray(ev.keyCode,[40,38,9,13,27]) === -1 ){

            var self = $(this);

            //set typeahead source to empty
            self.data('typeahead').source = [];

            //active used so we aren't triggering duplicate keyup events
            if( !self.data('active') && self.val().length > 0){

                self.data('active', true);

                //Do data request. Insert your own API logic here.
                $.getJSON("http://api.rottentomatoes.com/api/public/v1.0/movies.json?callback=?&apikey=MY_API_KEY&page_limit=5",{
                    q: encodeURI($(this).val())
                }, function(data) {

                    //set this to true when your callback executes
                    self.data('active',true);

                    //Filter out your own parameters. Populate them into an array, since this is what typeahead's source requires
                    var arr = [],
                        i=0;

                    var movies = data.movies;

                     $.each(movies, function(index, movie) {
                        arr[i] = movie.title
                        i++;
                     });

                    //set your results into the typehead's source 
                    self.data('typeahead').source = arr;

                    //trigger keyup on the typeahead to make it search
                    self.trigger('keyup');

                    //All done, set to false to prepare for the next remote query.
                    self.data('active', false);

                });

            }
        }
    });

是否可以设置一个小延迟并避免在每个键盘后调用API？

6440

2018-04-01 17:11

起源

答案:

它可以像这样轻松完成：

var autocomplete = $('#searchinput').typeahead().on('keyup', delayRequest);

function dataRequest() {
    // api request here
}

function delayRequest(ev) {
    if(delayRequest.timeout) {
        clearTimeout(delayRequest.timeout);
    }

    var target = this;

    delayRequest.timeout = setTimeout(function() {
        dataRequest.call(target, ev);
    }, 200); // 200ms delay
}

2018-04-01 17:29

这很好用，但似乎陷入循环，每隔200毫秒调用一次datarequest？ - Paul

在您的代码中，您在keyup之后触发keyup： self.trigger('keyup')。要正确的键盘事件处理，您应该删除 ev.stopPropagation(); 和 self.trigger('keyup') - Vitaly Muminov

这就是诀窍......谢谢！ - Paul

答案:

它可以像这样轻松完成：

var autocomplete = $('#searchinput').typeahead().on('keyup', delayRequest);

function dataRequest() {
    // api request here
}

function delayRequest(ev) {
    if(delayRequest.timeout) {
        clearTimeout(delayRequest.timeout);
    }

    var target = this;

    delayRequest.timeout = setTimeout(function() {
        dataRequest.call(target, ev);
    }, 200); // 200ms delay
}

2018-04-01 17:29

这很好用，但似乎陷入循环，每隔200毫秒调用一次datarequest？ - Paul

在您的代码中，您在keyup之后触发keyup： self.trigger('keyup')。要正确的键盘事件处理，您应该删除 ev.stopPropagation(); 和 self.trigger('keyup') - Vitaly Muminov

这就是诀窍......谢谢！ - Paul

通常，这可以通过实现 setTimeout 和 clearTimeout 方法：

var timer;

$('#textbox').keyup(function() {
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout('alert("Something cool happens here....");', 500);
});

setTimeout 将在指定的时间间隔（以毫秒为单位）后执行提供的javascript。 clearTimeout 将取消此执行。

我也准备好了 jsFiddle演示显示代码片段。

参考文献：

Javascript计时方法

2018-04-01 17:26

对于使用v0.11的人 typeahead.js 和使用寻血猎犬要获取远程建议，您可以使用rateLimitWait选项来限制请求：

var search = new Bloodhound({
  datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {
    url: '/search?q=%QUERY',
    rateLimitWait: 500
  }
});

2018-04-30 20:58

不确定Bootstrap 2.0用于typeahead的版本，但v0.9.3有一个隐藏在引擎盖下的minLength选项，但没有记录。

$('#people').typeahead({
  name: 'people',
  prefetch: './names.json',
  minLength: 3
});

从这篇博文中可以找到： http://tosbourn.com/2013/08/javascript/setting-a-minimum-length-for-your-search-in-typeahead-js/

2017-12-11 20:34

如果您只是想让用户在ajax $ .getJSON请求之前输入几个字符，而不是延迟，您可以修改if语句，以便用户必须输入最少数量的字符，例如3您请求数据：

if( !self.data('active') && self.val().length >=3){

-1

2018-04-01 17:25

问题 我可以延迟jquery的keyup事件吗？

答案:

答案:

热门问题

问题我可以延迟jquery的keyup事件吗？