0

I'm sure there must be something out there that'll do this for me.

I have a web user interface that shows a list of items. If you click on an item, two things will happen; the UI will be updated with immediately available information, and then an async request will be made to get more information. When that completes, it'll update another part of the UI. Simple, right?

But... What if I want to throttle the server requests? What if I click on another item while that information was being fetched, and end up with a race condition which might end up with the wrong info onscreen? What if by clicking on another item, I want the opportunity to cancel the preciously throttled fetch?

I've got a fair idea of what the code would look like in order to do this, but with all the edge cases it'd be nice to know if there was something out there already?

Barguast
  • 5,926
  • 9
  • 43
  • 73
  • You may save a lot of complexity by simply preventing the user performing another request until the first has completed. – Ben Aston Oct 27 '15 at 22:28
  • I agree with ^that guy. I would set a variable to disable allowing new requests until the current request completed. – pizzarob Oct 27 '15 at 22:29
  • If forcing users to wait for the previous request to complete is not viable, then `XmlHttpRequest` (if that is the API you are using), has an `abort` API which you should call immediately before submitting another request that you want to override the earlier one. And BTW this is not throttling. If you want throttling there are certainly library functions that will do that for you. See underscore/jQuery plugins/lodash. – Ben Aston Oct 27 '15 at 22:33
  • True, though I don't like the thought of essentially freezing part of my UI. The throttling is an important part of this as well as the race condition - imagine something like Google's APIs which are subject to usage limits. I wouldn't want to add an arbitrary delay anywhere, I'd just want to make sure at least X seconds has passed since the last request and, if not, wait for the remaining time. However, this could easily exacerbate the race condition side of this too. – Barguast Oct 27 '15 at 22:36
  • What you are talking about is a debounce [1] function. But you probably don't need to debounce it if your app is simple and you abort any in-flight call as soon as clicks are made. Without a debounce, you will have lots of incomplete HTTP request/response exchanges (and what's the harm in that?). [1] http://stackoverflow.com/questions/25991367/difference-between-throttling-and-debouncing-a-function – Ben Aston Oct 27 '15 at 22:43

2 Answers2

1

Normaly you would use Semaphores for this so if you are able the check the semaphore during processing your assync information for new process calls in the semaphore and it is from the same source. You Could potentially kill the acutal async process and start the next in the semaphore.

k4yaman
  • 475
  • 8
  • 20
0

Check out underscore functions throttle and debounce. You can see how it's implemented in annotated source http://underscorejs.org/docs/underscore.html#section-82

longchiwen
  • 822
  • 6
  • 11