0

I am brand-spanking new to AngularJS and I am contributing to my first ever open source project. My first issue is that, when using the search box on the page, if you repeat a search enough times (for example, searching for mathematics and then deleting the s, retyping the s, etc), eventually the search for mathematic will return the results intended for mathematics. The search is set up to perform the search with every keyup.

You can test it out on the page here: https://www.oppia.org/

Developer tools shows that this is a timing issue where the search results for the previous request are returning before the search results for the current request.

I've looked at several questions and these two seem the most relevant:

I've tried using the cancel promise option, but testing thus far has showed that none of the requests were, in fact, being cancelled. On looking at the other question, it seems like the debouncer should take the place of this other option, but I wasn't sure.

We're using v1.4 and we have implemented a debouncer for 400 milliseconds. My question is, is the solution simply be to make the debouncer delay longer or do I need to further investigate cancelling the previous xhr request when a new request is made?

Community
  • 1
  • 1
K. Anthony
  • 79
  • 1
  • 8
  • 1
    just check that the result set matches the current term before rendering the results; you don't actually need to abort the ajax, you can just ignore it when it's done if stale. you should also cache the terms client-side for a little bit to avoid rush conditions as the term is backspaced. – dandavis Feb 04 '16 at 04:10
  • That was an idea suggested in the issue, so thank you for bringing that up as an option. But I wasn't sure how to do that. Is it as simple as creating another variable to hold the current query string and using an if statement? – K. Anthony Feb 04 '16 at 04:12
  • i'm not sure of your internals, but the term is typically available to the ajax callback. you might want to copy it and compare now-vs-then if your ajax doesn't know what it was looking for, but it's as simple as an early return or IF block in the callback to prevent the stale suggestions from appearing. – dandavis Feb 04 '16 at 04:16
  • Seems like a job for [interceptors](https://docs.angularjs.org/api/ng/service/$http#interceptors). – Knu Feb 04 '16 at 04:20
  • I'll give the comparison a try, first and see what happens. Thanks for your suggestions. – K. Anthony Feb 04 '16 at 04:27
  • I tried comparing the search query constructed by the code to the url returned by the HTTP request but they match. So, instead, I compare the current value of the input box to the searchQuery variable defined in the JS. It seems to be working. `if ($(".oppia-splash-search-input").val() === searchQuery)` Is that a stupid way to do things? – K. Anthony Feb 05 '16 at 04:04

0 Answers0