延迟搜索 延时搜索

How to delay the .keyup() handler until the user stops typing?

I use this small function for the same purpose, executing a function after the user has stopped typing for a specified amount of time or in events that fire at a high rate, like resize:

function delay(callback, ms) {
  var timer = 0;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      callback.apply(context, args);
    }, ms || 0);
  };
}


// Example usage:

$('#input').keyup(delay(function (e) {
  console.log('Time elapsed!', this.value);
}, 500));

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="input">Try it:
<input id="input" type="text" placeholder="Type something here..."/>
</label>

 

How it works:

The delay function will return a wrapped function that internally handles an individual timer, in each execution the timer is restarted with the time delay provided, if multiple executions occur before this time passes, the timer will just reset and start again.

When the timer finally ends, the callback function is executed, passing the original context and arguments (in this example, the jQuery's event object, and the DOM element as this).

UPDATE 2019-05-16

I have re-implemented the function using ES5 and ES6 features for modern environments:

function delay(fn, ms) {
  let timer = 0
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(fn.bind(this, ...args), ms || 0)
  }
}

The implementation is covered with a set of tests.

For something more sophisticated, give a look to the jQuery Typewatch plugin.

 

另外一个人写了一个jQuery的插件，

Another alternative: github.com/bgrins/bindWithDelay/blob/master/bindWithDelay.js. It pretty much works the same way you described, I just found myself using that pattern a lot so implemented it as a jQuery plugin to make the syntax simpler. Here is a demo page: briangrinstead.com/files/bindWithDelay

– Brian Grinstead

Aug 13 '10 at 14:31                         

 

AJAX: Delay for search on typing in form field [duplicate]

var delayTimer;
function doSearch(text) {
    clearTimeout(delayTimer);
    delayTimer = setTimeout(function() {
        // Do the ajax stuff
    }, 1000); // Will do the ajax stuff after 1000 ms, or 1 s
}

 

作者:Chuck Lu    GitHub