Chrome 57 使 .data() 无法正常运行答案

【问题标题】：Chrome 57 making .data() not function wellChrome 57 使 .data() 无法正常运行
【发布时间】：2017-03-30 23:06:36
【问题描述】：

当用户在 Chrome 57 中工作时，.on("change") 事件的这一部分无法正常工作。这只是 Chrome 57 的问题。

if 中的 userId 变量在到达这段代码之前已设置并具有一个值。
但是，条件没有在应该为真时被发现。

但是，如果我正在调试并且设置了断点，我会在 if 上设置断点，然后我会在断点处停止并徘徊一段时间，这是否可以正常工作。

这不会影响所有使用 57 的人。
这个问题我只能重现两次，调试后就消失了。

知道发生了什么以及如何解决它吗？
我还要注意，我们使用的是非常旧的 jquery 版本 - 1.11.1，升级并不容易。

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
}

【问题讨论】：

你可能会在它周围包裹一个 setTimeout 直到出现更好的东西
发布设置userId 的代码可能会有所帮助。
我也看到 Chrome 57 和 .data() 有一些问题。不太确定是什么问题，因为它不一致。当我们刷新页面时，它会随机中断。

标签： javascript jquery google-chrome

【解决方案1】：

对我来说，这成功了：

在.data()设置的地方，只保存元素或数据的结果某处。

$('#someElem').data('userId', '1234');
var elemData = $('#someElem').data('userId');

window['someUniqueKey'] = elemData;
//or
console.log(elemData);

然后，对$('#someElem').data('userId') 的调用应该在您的事件处理程序中返回有效数据。

至于为什么会发生这种情况：我将非常感谢您的回答。我的一位同事建议这可能与新 Chrome 中的垃圾收集有关。但如果是这样，它看起来像是 GC 中的一个错误。

【讨论】：

我将此标记为答案，因为在设置属性后立即记录整个元素后，错误停止了。

【解决方案2】：

我不知道确切的原因，但这似乎与垃圾收集有关。此外，Chrome 已经开始进行一些激进的 Javascript 限制。

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

我一直在尝试一个非常老套的修复方法，但它似乎有所改善：

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);
}

在 jQuery 之后和在你拥有代码之前加载这段 Javascript。它应该可以工作。

请注意，这可以防止对象被垃圾回收，因此会影响内存。

【讨论】：