(jquery/js)-从keyup上的字段中获取文本,但会延迟进一步键入

抱歉,我还没有测试过这个,它有点超出我的头,但沿着这些线的东西应该有希望做到这一点。将2000更改为服务器发布之间所需的毫秒数

<input type="text" id="mytextbox" style="border: 1px solid" />
<span></span>

<script language="javascript" type="text/javascript">
    jQuery(function(){
      jQuery('#mytextbox')
        .data('timeout', null)
        .keyup(function(){
            clearTimeout(jQuery(this).data('timeout'));
            jQuery(this).data('timeout', setTimeout(submitQuizForm, 2000));
        });
    });
</script>

这是您喜欢的jquery扩展:

(function($){

$.widget("ui.onDelayedKeyup", {

    _init : function() {
        var self = this;
        $(this.element).keyup(function() {
            if(typeof(window['inputTimeout']) != "undefined"){
                window.clearTimeout(inputTimeout);
            }  
            var handler = self.options.handler;
            window['inputTimeout'] = window.setTimeout(function() {
                handler.call(self.element) }, self.options.delay);
        });
    },
    options: {
        handler: $.noop(),
        delay: 500
    }

});
})(jQuery);

像这样使用它:

    $("input.filterField").onDelayedKeyup({
        handler: function() {
            if ($.trim($(this).val()).length > 0) {
                //reload my data store using the filter string.
            }
        }
    });

默认情况下会延迟半秒。

作为一个更新,我最终得到的结果似乎很好:

function afterDelayedKeyup(selector, action, delay){
  jQuery(selector).keyup(function(){
    if(typeof(window['inputTimeout']) != "undefined"){
      clearTimeout(inputTimeout);
    }  
    inputTimeout = setTimeout(action, delay);
  });
}

然后我从相关文档的页面调用此函数。ready block with

  afterDelayedKeyup('input#search',"submitQuizForm()",500)

最好是创建一个使用此逻辑的新jquery事件,例如delayedkeyup与.keyup并排,这样我就可以对单个页面的document.ready块说类似的话。

  jQuery('input#search').delayedKeyup(function(){
    submitQuizForm();
  });

但是,我不知道如何用这种方式定制jquery。不过,这是一个很好的家庭作业。

干得好,麦克斯,这对我很有帮助!我对你的功能做了一点小小的改进,使其更加通用:

function afterDelayedEvent(eventtype, selector, action, delay) {
    $(selector).bind(eventtype, function() {
        if (typeof(window['inputTimeout']) != "undefined") {
            clearTimeout(inputTimeout);
        }
        inputTimeout = setTimeout(action, delay);
    });
}

通过这种方式,您可以将它用于任何类型的事件,尽管keyup在这里可能是最有用的。

我知道这很古老,但当我在寻找如何做类似的事情时,它是第一个结果之一,所以我想我会分享我的解决方案。我把提供的答案结合起来,从中得到我需要的东西。

我想要一个定制的事件,就像现有的jquery事件一样工作,它需要与 keypress +删除、退格和回车。

这是我的jquery插件:

$.fn.typePause = function (dataObject, eventFunc)
    {
        if(typeof dataObject === 'function')
        {
            eventFunc = dataObject;
            dataObject = {};
        }
        if(typeof dataObject.milliseconds === 'undefined')
            dataObject.milliseconds = 500;
        $(this).data('timeout', null)
            .keypress(dataObject, function(e)
            {
                clearTimeout($(this).data('timeout'));
                $(this).data('timeout', setTimeout($.proxy(eventFunc, this, e), dataObject.milliseconds));
            })
            .keyup(dataObject, function(e)
            {
                var code = (e.keyCode ? e.keyCode : e.which);
                if(code == 8 || code == 46 || code == 13)
                    $(this).triggerHandler('keypress',dataObject);
            });
    }

我用过 $.proxy() 为了在事件中保留上下文,尽管有更好的方法可以做到这一点,但性能方面是明智的。

要使用此插件,只需执行以下操作:

$('#myElement').typePause(function(e){ /* do stuff */ });

或

$('#myElement').typePause({milliseconds: 500, [other data to pass to event]},function(e){ /* do stuff */ });