DEV Community

Igor Alexandrov for JetRockets

Posted on • Originally published at jetrockets.pro

Typeahead async requests throttling

As everybody else have some legacy code (who does not have it?), and yesterday we faced with problem.

Our internal app have search panel where users could write and get related results. But search was written with typeahead and without any throttling. So it's triggered full text search on backend side on every input change which leads to DB connection pool exhaustion.

We didn't found any ready to use solutions, so we added following fix:

$input.typeahead(
  {
    ...
  },
  {
        ...
    async: true
    source: (query, syncResults, asyncResults) ->
      href = self.href
      # Added getAsyncResults call to throttle requests:
      getAsyncResults(
        () ->
          $.ajax(
            url: href
            data:
              query: query
            dataType: 'json'
          ).success(
            (data, textStatus, jqXHR) ->
              asyncResults(data)
          )
      )
  })
Enter fullscreen mode Exit fullscreen mode

where getAsyncResults defined before typeahead init:

# throttle is lodash function
getAsyncResults = _.throttle(((fn) ->
    fn()
  ), 300,
  { ... })
Enter fullscreen mode Exit fullscreen mode

Would be happy if someone find this simple solution helpfull.

Top comments (0)