1

I have a web app that is essentially a text box that the user can type in.

The user types in the box and then clicks a Submit button, and it executes a script to display an image.

Using AngularJS I can also have the same JS function called whenever the user types in the box, removing the need to click the button and offering a much smoother experience.

However, this means that this rather lengthy and intensive function can be called multiple times per second, especially for fast typers. On a desktop, this is no problem. On a mobile - at least, an entry-level mobile - it's extremely slow and is a horrible experience.

The automatic submission behaviour is controlled by a boolean variable that is TRUE by default.

On mobile, I would like to set this variable to FALSE. Even better would just be to set it to false for slow devices, but I don't think that's possible to detect. What's the easiest way of doing this?

snazzybouche
  • 2,241
  • 3
  • 21
  • 51
  • @RobG What does the screen size have to do with anything? – user94559 Jun 29 '17 at 23:13
  • if you are trying to do something with keypress why not use debounce to improve performance. – karthick Jun 29 '17 at 23:14
  • its not possible to distinguish an entry level mobile and a high performant mobile. you need to change your strategy. – karthick Jun 29 '17 at 23:15
  • @RobG Screen size isn't relevant, it's processing speed. The script generates a unique image for any phrase the user types. eg "Hello my na" is a different image to "Hello my nam", and so on. So, while "automatic submission" is turned on, a different image is generated on every keypress. The user can turn this off if they like; I just want to control the default behaviour. – snazzybouche Jun 29 '17 at 23:20
  • @snazzybouche—usually the issue is with resizing for different size screens, I didn't realise it was only about processing power, which isn't necessarily related to mobile devices. Perhaps the question should be "how do I detect low performance hosts" or similar. Some mobile devices are very powerful, some non-mobile devices aren't. – RobG Jun 29 '17 at 23:37
  • @RobG Title edited, thank you – snazzybouche Jun 29 '17 at 23:49
  • @snazzybouche—thank *you*. ;-) – RobG Jun 30 '17 at 00:34
  • You might look at [*How can I recognize slow devices in my website?*](https://stackoverflow.com/questions/12437536/how-can-i-recognize-slow-devices-in-my-website) You might be able to leverage [*requestAnimationFrame*](http://creativejs.com/resources/requestanimationframe/). If you manage to solve this, please post an answer as there aren't any good ones on SO. Also [*How does jsPerf work?*](https://stackoverflow.com/questions/4986245/how-does-jsperf-work) may help. – RobG Jun 30 '17 at 01:03

2 Answers2

1

You can use a debounce function to only run the function after X time to stop typing, In this article you can find how to implement it

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

But if you still want to detect if it is a mobile device, you can use this small function

function isMobile() {
    return /Mobi/.test(navigator.userAgent) || /Android/.test(navigator.userAgent);
}
Cristyan
  • 650
  • 4
  • 15
0

Some of these answers might help you out:

https://stackoverflow.com/search?q=determine+mobile

(but for fun...) Welll... wonky way first.. you could do a performance timer when loading the page.

  1. show a busy indicator..
  2. create a counter x++ for 1 second..
  3. if x > 10000.. fast device (total out of my butt number)
  4. if x < 10000.. slow device
  5. remove busy indicator and proceed

Like I said.. that's wonky and people will argue a) you're wasting time and b) you're wasting battery. I would not make that argument if it really improves the user experience later.

There's also the library many folks use to determine the browser 'type' and the features it provides.

louisik1
  • 141
  • 7
  • *Any* other method of determining performance will have to do something similar. "how fast can I make this thing do x?!" :) – louisik1 Jun 29 '17 at 23:26