Run javascript function when user finishes typing instead of on key up?

前端未结

关注

 29  2025

I want to trigger an ajax request when the user has finished typing in a text box. I don\'t want it to run the function on every time the user types a letter because that wo

相关标签:

29条回答

广开言路

2020-11-22 04:45
It's just one line with underscore.js debounce function:
```
$('#my-input-box').keyup(_.debounce(doSomething , 500));
```
This basically says doSomething 500 milliseconds after I stop typing.

For more info: http://underscorejs.org/#debounce
0 讨论(0)
发布评论:

提交评论
- 加载中...
执笔经年

2020-11-22 04:46

Well, strictly speaking no, as the computer cannot guess when the user has finished typing. You could of course fire a timer on key up, and reset it on every subsequent key up. If the timer expires, the user hasn't typed for the timer duration - you could call that "finished typing".

If you expect users to make pauses while typing, there's no way to know when they are done.

(Unless of course you can tell from the data when they are done)

0 讨论(0)
发布评论:

提交评论
- 加载中...
故里飘歌

2020-11-22 04:46
Multiple timers per page

All the other answers only work for one control (my other answer included). If you have multiple controls per page (e.g. in a shopping cart) only the last control where the user typed something will get called. In my case this is certainly not the wished behaviour - each control should have its own timer.

To solve this, you simply have to pass an ID to the function and maintain a timeoutHandles dictionary as in the following code:

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

        timeoutHandles[id] = setTimeout(callback, ms);             
    };
})();
```
Function Usage:
```
  delayUserInput('yourID', function () {
     //do some stuff
  }, 1000);
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

情歌与酒

2020-11-22 04:48

This is the a simple JS code I wrote:

<!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>

0 讨论(0)

情深已故

2020-11-22 04:49

If you are looking for a specific length (such as a zipcode field):

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

0 讨论(0)

梦毁少年i

2020-11-22 04:50

Simple and easy to understand.

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

0 讨论(0)

Run javascript function when user finishes typing instead of on key up?

Multiple timers per page