This part of an .on("change") event is not working properly when users are working in Chrome 57. This is only a Chrome 57 issue.
The userId variable in the if is set and has a value before it gets to this piece of code.
However, the conditional is not being found true when it should.
But if I am debugging and have a break point set I think on the if and I stop at the break point and linger for a while does this work properly.
This is not affecting everyone using 57.
I've only been able to recreate this issue twice and after debugging, it goes away.
Any idea on what's going on and how to fix it?
I will also note that we are using a very old version of jquery - 1.11.1 and upgrading will not be easy.
var selected = $(this).children("option:selected");
var name = selected.html();
var userId = selected.attr("value");
var personInList;
$("li", "#list1").add("li.person", "#list2").each(function () {
if ($(this).data("userId") == userId) {
personInList = $(this);
return;
}
});
if (userId && userId!= "default" && !personInList) {
//some code that gets triggered that shouldn't because this "if" is turning up true
}
I don't know the exact cause, but this seems related to garbage collection. Also, Chrome has started doing some aggressive Javascript throttling.
https://blog.chromium.org/2017/03/reducing-power-consumption-for.html
https://docs.google.com/document/d/1vCUeGfr2xzZ67SFt2yZjNeaIcXGp2Td6KHN7bI02ySo
https://docs.google.com/document/d/18_sX-KGRaHcV3xe5Xk_l6NNwXoxm-23IOepgMx4OlE4
I have been trying a very hacky fix, but it seems to improve things:
var _oldjQueryData = jQuery.fn.data;
var _chrome57Fix = {};
jQuery.fn.data = function(key, value){
if(key && value) {
var resultElem = _oldjQueryData.call(this, key, value);
var resultData = _oldjQueryData.call(this, key)
var cacheKey = key + '_' + 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
return v.toString(16);
});
_chrome57Fix[cacheKey] = resultData;
return resultElem;
}
return _oldjQueryData.call(this, key);
}
Load this piece of Javascript after jQuery and before you own code. It should work.
Note that this prevents objects from being garbage collected, therefore it has memory impact.
For me, this did the trick:
In the place that the .data() is set, just save the element or the result of data somewhere.
$('#someElem').data('userId', '1234');
var elemData = $('#someElem').data('userId');
window['someUniqueKey'] = elemData;
//or
console.log(elemData);
Then, the call to $('#someElem').data('userId') should return valid data in your event handler.
As to why this happens: I would be very gratefull for an answer. A colleague of mine suggested it might be something with the Garbage Collection in the new Chrome. But if so, it looks like it's a bug in the GC.