用户完成键入而不是按键时运行javascript函数？

Question

我想在用户输入文本框时触发ajax请求。我不希望它在每次用户输入字母时都运行该函数，因为这会导致大量的ajax请求，但是我不希望他们也必须点击输入按钮。

有没有办法可以检测用户何时完成输入然后执行ajax请求？

在这里使用jQuery！ 戴夫

Answer 1

所以，我猜猜完成打字就意味着你停了一会儿，说5秒钟。因此，考虑到这一点，让我们在用户释放密钥时启动计时器，并在按下密钥时清除它。我决定有问题的输入是#myInput。

做出一些假设......

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example
var $input = $('#myInput');

//on keyup, start the countdown
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}

Answer 2

上面选择的答案不起作用。

因为typingTimer被多次设置（在快速打字机等触发keydown之前按两次键盘）然后它没有正确清除。

下面的解决方案解决了这个问题，并在OP请求完成后调用X秒。它也不再需要冗余的keydown功能。我还添加了一个检查，以便在输入为空时不会发生函数调用。

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on keyup, start the countdown
$('#myInput').keyup(function(){
    clearTimeout(typingTimer);
    if ($('#myInput').val()) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

和vanilla JavaScript解决方案中的相同代码：

//setup before functions
let typingTimer;                //timer identifier
let doneTypingInterval = 5000;  //time in ms (5 seconds)
let myInput = document.getElementById('myInput');

//on keyup, start the countdown
myInput.addEventListener('keyup', () => {
    clearTimeout(typingTimer);
    if (myInput.value) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

此解决方案确实使用ES6，但这里没有必要。只需将let替换为var，将箭头函数替换为常规函数。

Answer 3

只有一行 underscore.js 去抖功能：

$('#my-input-box').keyup(_.debounce(doSomething , 500));

在我停止输入后，这基本上说是 doSomething 500毫秒。

了解更多信息：http://underscorejs.org/#debounce

Answer 4

是的，您可以在每个启动事件上设置2秒的超时时间，该事件将触发ajax请求。您还可以存储XHR方法并在随后的按键事件中将其中止，以便您节省带宽甚至更多。这是我为自己的自动完成脚本编写的内容。

var timer;
var x;

$(".some-input").keyup(function () {
    if (x) { x.abort() } // If there is an existing XHR, abort it.
    clearTimeout(timer); // Clear the timer so we don't end up with dupes.
    timer = setTimeout(function() { // assign timer a new timeout 
        x = $.getJSON(...); // run ajax request and store in x variable (so we can cancel)
    }, 2000); // 2000ms delay, tweak for faster/slower
});

希望这有帮助，

马尔科

Answer 5

var timer;
var timeout = 1000;

$('#in').keyup(function(){
    clearTimeout(timer);
    if ($('#in').val) {
        timer = setTimeout(function(){
            //do stuff here e.g ajax call etc....
             var v = $("#in").val();
             $("#out").html(v);
        }, timeout);
    }
});

此处的完整示例：http://jsfiddle.net/ZYXp4/8/

Answer 6

我喜欢Surreal Dream的答案，但我发现我的“doneTyping”功能会触发每个按键，即如果你真的很快输入“Hello”;当你停止输入时，该功能只会发射一次，而不是只发射一次。

问题是javascript setTimeout函数似乎没有覆盖或终止已经设置的任何旧超时，但是如果你自己这样做就可以了！所以我只是在setTimeout之前添加了一个clearTimeout调用，如果设置了typingTimer。见下文：

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example

//on keyup, start the countdown
$('#myInput').on("keyup", function(){
    if (typingTimer) clearTimeout(typingTimer);                 // Clear if already set     
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$('#myInput').on("keydown", function(){
    clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

N.B。我本来希望将此作为对Surreal Dream答案的评论添加，但我是新用户并且没有足够的声誉。遗憾！

Answer 7

修改已接受的答案以处理其他案例，例如粘贴：

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 2000;  //time in ms, 2 second for example
var $input = $('#myInput');

// updated events 
$input.on('input propertychange paste', function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(doneTyping, doneTypingInterval);      
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}

Answer 8

前两个答案对我都不起作用。所以，这是我的解决方案：

var timeout = null;

$('#myInput').keyup(function() {
    clearTimeout(timeout);

    timeout = setTimeout(function() {
        //do stuff here
    }, 500);
});

Answer 9

在这种情况下我不认为keyDown事件是必要的（如果我错了，请告诉我为什么）。在我的（非jquery）脚本中，类似的解决方案看起来像这样：

var _timer, _timeOut = 2000; 



function _onKeyUp(e) {
    clearTimeout(_timer);
    if (e.keyCode == 13) {      // close on ENTER key
        _onCloseClick();
    } else {                    // send xhr requests
        _timer = window.setTimeout(function() {
            _onInputChange();
        }, _timeOut)
    }

}

这是我对Stack Overflow的第一个回复，所以我希望有一天能帮助别人：）

Answer 10

嗯，严格来说不是，因为计算机无法猜到用户何时完成输入。当然，您可以在按键上启动计时器，并在每个后续按键上重置它。如果计时器到期，用户没有输入计时器持续时间 - 你可以称之为“完成输入”。

如果您希望用户在打字时暂停，则无法知道他们何时完成。

（当然，除非数据完成后你可以告诉他们）

Answer 11

最新答案，但是我要添加它，因为它是在2019年，并且完全可以使用漂亮的ES6，没有第三方库来实现，而且我发现大多数获得高度评价的答案都是庞大的，并且变量太多。 >

来自this excellent blog post.

的优雅解决方案

function debounce(callback, wait) {
  let timeout;
  return (...args) => {
      const context = this;
      clearTimeout(timeout);
      timeout = setTimeout(() => callback.apply(context, args), wait);
  };
}

window.addEventListener('keyup', debounce( () => {
    // code you would like to run 1000ms after the keyup event has stopped firing
    // further keyup events reset the timer, as expected
}, 1000))

Answer 12

同意@going的回答。另一个对我有用的类似解决方案是下面的解决方案。唯一的区别是我使用.on（＆＃34;输入＆＃34; ...）而不是keyup。这仅捕获输入中的更改。忽略其他键，如Ctrl，Shift等

var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on input change, start the countdown

$('#myInput').on("input", function() {    
    clearTimeout(typingTimer);
    typingTimer = setTimeout(function(){
        // doSomething...
    }, doneTypingInterval);
});

Answer 13

对于input事件，我觉得解决方案有点简单：

var typingTimer;
var doneTypingInterval = 500;

$("#myInput").on("input", function () {
    window.clearTimeout(typingTimer);
    typingTimer = window.setTimeout(doneTyping, doneTypingInterval);
});

function doneTyping () {
    // code here
}

Answer 14

我正在我的列表中实现搜索，并且需要它是基于ajax的。这意味着在每次关键更改时，都应更新并显示搜索结果。这导致发送到服务器的这么多ajax调用，这不是一件好事。

经过一些工作，我在用户停止输入时设法ping服务器。

这个解决方案对我有用：

$(document).ready(function() {
    $('#yourtextfield').keyup(function() {
        s = $('#yourtextfield').val();
        setTimeout(function() { 
            if($('#yourtextfield').val() == s){ // Check the value searched is the latest one or not. This will help in making the ajax call work when client stops writing.
                $.ajax({
                    type: "POST",
                    url: "yoururl",
                    data: 'search=' + s,
                    cache: false,
                    beforeSend: function() {
                       // loading image
                    },
                    success: function(data) {
                        // Your response will come here
                    }
                })
            }
        }, 1000); // 1 sec delay to check.
    }); // End of  keyup function
}); // End of document.ready

您会注意到在执行此操作时无需使用任何计时器。

Answer 15

这是我写的一个简单的JS代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head><title>Submit after typing finished</title>
<script language="javascript" type="text/javascript">
function DelayedSubmission() {
    var date = new Date();
    initial_time = date.getTime();
    if (typeof setInverval_Variable == 'undefined') {
            setInverval_Variable = setInterval(DelayedSubmission_Check, 50);
    } 
}
function DelayedSubmission_Check() {
    var date = new Date();
    check_time = date.getTime();
    var limit_ms=check_time-initial_time;
    if (limit_ms > 800) { //Change value in milliseconds
        alert("insert your function"); //Insert your function
        clearInterval(setInverval_Variable);
        delete setInverval_Variable;
    }
}

</script>
</head>
<body>

<input type="search" onkeyup="DelayedSubmission()" id="field_id" style="WIDTH: 100px; HEIGHT: 25px;" />

</body>
</html>

Answer 16

您可以使用onblur事件来检测文本框何时失去焦点： https://developer.mozilla.org/en/DOM/element.onblur

这与“停止输入”不一样，如果你关心用户输入一堆东西然后坐在那里文本框仍然聚焦的情况。

为此，我建议将setTimeout绑定到onclick事件，并假设在没有击键的x时间后，用户已停止输入。

Answer 17

我只是想出了一个等待用户完成输入的简单代码：

步骤1.将超时设置为null，然后在用户键入时清除当前超时。

步骤2.触发keyup事件之前触发清除超时定义变量。

步骤3.对上面声明的变量定义超时;

<input type="text" id="input" placeholder="please type" style="padding-left:20px;"/>
<div class="data"></div>

javascript代码

var textInput = document.getElementById('input');
var textdata = document.querySelector('.data');
// Init a timeout variable to be used below
var timefired = null;

// Listen for keystroke events
// Init a timeout variable to be used below
var timefired = null;// Listen for keystroke events
textInput.onkeyup = function (event) {
clearTimeout(timefired);
timefired = setTimeout(function () {
    textdata.innerHTML = 'Input Value:'+ textInput.value;
  }, 600);
};

Answer 18

声明以下delay函数：

var delay = (function () {
    var timer = 0;
    return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})()

然后使用它：

let $filter = $('#item-filter');
$filter.on('keydown', function () {
    delay(function () {            
        console.log('this will hit, once user has not typed for 1 second');            
    }, 1000);
});    

Answer 19

用于将参数与ES6语法一起传递给函数。

$(document).ready(() => {
    let timer = null;
     $('.classSelector').keydown(() => {
     clearTimeout(timer); 
     timer = setTimeout(() => foo('params'), 500);
  });
});

const foo = (params) => {
  console.log(`In foo ${params}`);
}

Answer 20

如果用户有必要离开该领域，我们可以在Javascript中使用“ onBlur”代替Onchange

  <TextField id="outlined-basic"  variant="outlined" defaultValue={CardValue} onBlur={cardTitleFn} />

如果那不是必须的，那么设置计时器将是个不错的选择。

Answer 21

如果有人正在寻找AngularJS解决方案，则不是直接答案。我根据这里流行的解决方案写了一条指令。

 app.directive("ngTypeEnds", ["$timeout", function ($timeout) {
    return function (scope, element, attrs) {
        var typingTimer;               
        element.bind("keyup", function (event) {
            if (typingTimer)
                $timeout.cancel(typingTimer);
            if (angular.element(element)[0].value) {
                typingTimer = $timeout(function () {
                    scope.$apply(function () {
                        scope.$eval(attrs.ngTypeEnds);
                    });
                }, 500);
            }
            event.preventDefault();
        });
    };
}]);

Answer 22

简单易懂。

var mySearchTimeout;
$('#ctl00_mainContent_CaseSearch').keyup(function () {
   clearTimeout(mySearchTimeout);
   var filter = $(this).val();
   mySearchTimeout = setTimeout(function () { myAjaxCall(filter); }, 700);
   return true;
});

Answer 23

你们听说过javascript中的闭包吗？！

这非常简单明了，只需将当前输入值与setTimeOut函数关闭的旧值进行比较，就可以了。

let timer;
$('#myInput').on('keyup', function() {
  window.clearTimeout(timer);
  // here is the closures javascript magic happens.
  const value = $(this).val();
  timer = setTimeout(() => {
    if(value === $(this).val() && $(this).val()!== ''){
        alert($(this).val());
    }
  }, 500);
})

Answer 24

如果您需要等到用户完成输入，请使用简单的：

$(document).on('change','#PageSize', function () {
    //Do something after new value in #PageSize       
});

使用ajax调用完成示例 - 这适用于我的寻呼机 - 每个列表的项目数：

$(document).ready(function () {
    $(document).on('change','#PageSize', function (e) {
        e.preventDefault();
        var page = 1;
        var pagesize = $("#PageSize").val();
        var q = $("#q").val();
        $.ajax({
            url: '@Url.Action("IndexAjax", "Materials", new { Area = "TenantManage" })',
            data: { q: q, pagesize: pagesize, page: page },
            type: 'post',
            datatype: "json",
            success: function (data) {
                $('#tablecontainer').html(data);
               // toastr.success('Pager has been changed', "Success!");
            },
            error: function (jqXHR, exception) {
                ShowErrorMessage(jqXHR, exception);
            }
        });  
    });
});    

Answer 25

每页有多个计时器

所有其他答案仅适用于一个控件（包括my other answer）。 如果您每页有多个控件（例如，在购物车中），则只会调用用户在其中键入内容的最后一个控件。就我而言，这当然不是所希望的行为-每个控件都应具有自己的计时器。

要解决此问题，只需要将ID传递给函数并维护timeoutHandles字典，如以下代码所示：

功能声明：

var delayUserInput = (function () {
    var timeoutHandles = {};    
    return function (id, callback, ms) {        
        if (timeoutHandles[id]) {
            clearTimeout(timeoutHandles[id]);
        }

        timeoutHandles[id] = setTimeout(callback, ms);             
    };
})();

功能用法：

  delayUserInput('yourID', function () {
     //do some stuff
  }, 1000);

Answer 26

为什么不使用onfocusout？

https://www.w3schools.com/jsreF/event_onfocusout.asp

如果它是一个表单，它们将始终保留每个输入字段的焦点，以便单击提交按钮，因此您知道在调用其onfocusout事件处理程序时不会错过任何输入。

Answer 27

不确定我的需求是否有点奇怪，但我需要类似于此的东西，这就是我最终使用的内容：

$('input.update').bind('sync', function() {
    clearTimeout($(this).data('timer'));            
    $.post($(this).attr('data-url'), {value: $(this).val()}, function(x) {
        if(x.success != true) {
            triggerError(x.message);    
        }
    }, 'json');
}).keyup(function() {
    clearTimeout($(this).data('timer'));
    var val = $.trim($(this).val());
    if(val) {
        var $this = $(this);
        var timer = setTimeout(function() {
            $this.trigger('sync');
        }, 2000);
        $(this).data('timer', timer);
    }
}).blur(function() {
    clearTimeout($(this).data('timer'));     
    $(this).trigger('sync');
});

这允许我在我的应用程序中包含这样的元素：

<input type="text" data-url="/controller/action/" class="update">

当用户“完成输入”（2秒内没有动作）或进入另一个字段（模糊了元素）时会更新

Answer 28

如果您要查找特定长度（例如邮政编码字段）：

$("input").live("keyup", function( event ){
if(this.value.length == this.getAttribute('maxlength')) {
        //make ajax request here after.
    }
  });

Answer 29

在文本框中检测到焦点后，在按键上执行超时检查，并在每次触发时重置它。

超时完成后，请执行ajax请求。

Answer 30

哇，即使3条评论都是非常正确的！

1. 空输入不是跳过函数调用的原因，例如我在重定向

之前从url中删除了废弃参数

2. await应该用于触发Compare，.on ('input', function() { ... });和keyup事件

3. 必须使用paste或change

4. 您可以使用.val()内部事件功能代替.value来处理多个输入

5. （我的决定）我在$(this)中使用匿名函数代替#id，以便从n.4轻松访问doneTyping，但您需要先将其保存为{{{} 1}}