1

I have a largish app which in one place contains something like this. It's created by the Intel XDK New's ui builder.

<div class="table-thing with-label widget uib_w_11 team-margins-2" data-uib="jquery_mobile/select" data-ver="0">
  <label class="narrow-control">Choose region:</label>
  <div data-role="fieldgroup" class+="" "wide-control"="">
    <select autofocus="" data-native-menu="true" id="region-id" data-mini="true">
      <option value="1">One</option>
      <option value="2">Two</option>
    /select>
  </div>
</div>

<div class="table-thing with-label widget uib_w_11 team-margins-2" data-uib="jquery_mobile/select" data-ver="0">
  <label class="narrow-control">Choose club:</label>
  <div data-role="fieldgroup" class+="" "wide-control"="">
    <select autofocus="" data-native-menu="true" id="club-id" data-mini="true">
    /select>
  </div>
</div>

I have an event handler on region-id like this. (Also one on club-id for other reasons.) 

var $select = $('#region-id');
$select.unbind('change');
$select.bind('change', function (event) {
  event.stopPropagation();
  event.preventDefault();
  var value = $select.find(':selected').val();
  ... insert <option> HTML into #club-id here
  ... with and without $select.selectmenu("refresh")
});

The change event triggers about 2 seconds after a choice is made on region-id on a Samsung Galaxy S4. Such a delay is problematic. The delay on the Samsung Tab2 is not noticeable.

  • I've put tap and vclick event handlers on region-id and they trigger about 1.5-2 secs before change does. (Timing done with window.performance.now)
  • The change event handler is more extensive that that illustrated but it completes in less than .1 sec.
  • I've dumped $('club-id').html() at the end of the handler and its the same as the HTML when club-id is finally rendered.
  • FWIW, $.mobile.buttonMarkup.hoverDelay = 0 doesn't help.

So I conclude there is a built-in 1.5-2sec delay built-in on at least this phone.

This seems similar to 0.5 sec delays on click events for buttons, workarounds for which are easily found:fastclick and Google fast buttons

However these don't work for click on a select option. The only relevant query I've found is this one on stackoverflow. There the questioner avoided the issue by opting for jqm's custom method with

data-native-menu="false"

I can't do this as it causes other issues which break my app.

So ... any suggestions on how to reduce the 2 sec delay on select's change trigger?

EDIT: MORE INFO

I followed up on Gavin Lloyd's suggestions, converted to non-jQuery handlers and added some event handlers:

$select[0].addEventListener('touchstart', function (event) {
  UTIL.consoleLog('touchstart event', UTIL.performanceNow());
  var value = $select.find(':selected').val();
  UTIL.consoleLog('value=', value);
});
$select[0].addEventListener('touchend', function (event) {
  UTIL.consoleLog('touchend event', UTIL.performanceNow());
  var value = $select.find(':selected').val();
  UTIL.consoleLog('value=', value);
});
$select[0].addEventListener('change', function (event) {
  UTIL.consoleLog('change event', UTIL.performanceNow());
  ...
});

The timings were:

5378 touchstart (tap dropdown button)
5471 touchend (end tap dropdown)
... say 0.25 sec to tap an option (no way to time this)
6539 change event
6543 start updating select tags
6558 end updating: do $select.selectmenu('refresh', true) and confirm $select.html() exists

So the DOM is updated 6558-5471-250 = .837 sec after the option is selected. This is reasonable. However the DOM is visually updated between 2-2.5 secs after the option is selected. This suggests much of the delay occurs after the HTML is updated

I rolled the CSS using the jqm themeroller and its not small'ish. I removed themes B&C leaving just A. (So 1/3 the original size.) This did not seem to affect the results.

I would not expect jqm to 'reload' the page or do anything else radical.

Any suggestions by jqm + phonegap are so slow repainting the DOM ?

Community
  • 1
  • 1
JohnSz
  • 2,049
  • 18
  • 17

3 Answers3

0

I suggest you to use 'vclick' which is already there in Jquery mobile library. It omits the native phone double click waiting time (300ms).vclick

Juliyanage Silva
  • 2,529
  • 1
  • 21
  • 33
  • vclick triggers when the user clicks on the dropdown (and so you can read the value selected at that time). It does not trigger when they click on the option they select, at least that's what my testing shows. :( – JohnSz May 21 '14 at 11:41
0

As a test, can you see how "old" the change event is by the time your handler gets executed? I'm not entirely sure when that timestamp gets generated, but if you see anything on the order of 2000ms, you'll know something is up.

$select.on('change', function(e) {
  var age = (new Date().getTime()) - e.timeStamp; // e.originalEvent.timeStamp
  alert('Change event age (ms): ' + age);
});

Also, try binding a DOM event handler directly:

$select[0].addEventListener('change', function(e) {
  // ...
});
Gavin Lloyd
  • 1
0

Tried this approach:

Created a empty app, in Intel XDK, with only one page containing only a select, with no javascripts and no styles (css):

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Tested in my iPhone, HTC Droid and Nexus 7. No problem in any of them, however, when I tested in Galaxy S4, the change event triggers the 2-2.5 seconds that you mentioned after a choice is made.

Seems to be a problem only for Galaxy S4. I don't have more devices to test it! =/

pedrofialho
  • 147
  • 1
  • 11