jQuery javascript防止连续输入更改事件触发器

Question

I have come accros this problem before. This time it is an HTML5 color input giving the problem. Here's the issue. I want to use an onChange event to send the user selected value from a color input to the server via Ajax - for an almost real time update to a database. However, when the user drags his mouse over the color swatch, it will trigger loads of onChange events in rapid succession, for each value change, so the server will get inundated with hundreds of pointless requests until the user stops sliding their mouse!

I could use onMouseOut for this particular issue, but I have had this issue with other things like detecting browser window resizing when a user click/drags to resize and the event is triggered with every pixel change. So I'm looking for an answer that will trigger on the final value only, for all similar scenarios.

What is the best method for dealing with this and just triggering when the data has finished changing. Ie ignore every change until user has settled on a final value. An onAfterChange method event would be nice, but I can't find one!

Answer 1

You can prevent this by debouncing your event handler function.

Every time a debounced function is called, it "pushes back" its execution by n ms. This means that while triggered numerous times within t ms (eg: while the mouse is moving), it will only execute the handler after not being triggered for t ms (eg: when the mouse has stopped moving).

Edit:

Ok, the jquery link was a bit out-of-date.. a better example of how to debounce can be found in the Underscore.js source here .

Answer 2

How about this:

1. Set a timeout to send request to server, after the first onChange triggering, and change the first flag to false .

2. Every onChange is triggered, reset the timeout count.

3. After sending request, reset the first flag.

Edit: This is the sample code:

 $(document).ready(function(){ var myInterval = undefined; var mytimeoutcount = NaN; var i =0; // for debug $("#myinput").keyup(function(){ console.log("event trigger"); // for debug mytimeoutcount = 300; if(myInterval == undefined){ myInterval = setInterval(function(){ mytimeoutcount -= 10; if(mytimeoutcount <= 0){ // do request, for debug i+=1; console.log(i); window.clearInterval(myInterval); myInterval = undefined; } }, 10); } }); }); 

 #myinput{ width:100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input id="myinput" type="text" value="test" />