javascript - 为什么 _.delay 将我的 e.type 从 mouseenter 变为 mouseover

Question

当我使用 backbone.js 触发此事件并尝试延迟函数调用时，event.type 从 mouseenter 更改为 mouseover，控制台日志显示“mouseenter”，第二个日志为“mouseover” 为什么转换？ ？？

app.newsroomPageElementView = Backbone.View.extend({
 events: {
    'mouseenter .featured-image': 'imageHover',
    'mouseleave .featured-image': 'imageHover'
 },
imageHover: function (e)  {
         Y.log(e.type); // this outputs out mouseenter
        _.delay(function(){ 
         Y.log(e.type); // this outputs mouseover
        }, 500);
    },    
});

是不是因为 500 毫秒后我的鼠标已经“进入”所以它实际上是一个鼠标悬停，因为当它被触发时我的鼠标在事件上？

Answer 1

发生这种情况是因为 Backbone 向您提供了一个对象的引用，然后它会重用该对象。

您可能知道，mouseenter 事件之后是 mouseover 事件。您没有用于 mouseover 的处理程序，因此通常您不会在意。

当 mouseenter 事件发生时，您的处理程序将使用此对象 e 调用。这是对 Backbone 中某个对象的引用；您记录了它的类型，但随后您在delay 处理程序中保留了对该对象的引用。

然后，您的事件处理程序返回，控制权交还给 Javascript 线程。 mouseover 事件触发。您的代码可能会忽略它，但 Backbone 会继续执行并重用它交给您的对象，并将有关 mouseover 事件的信息放入其中。

然后，您的延迟到期，您使用 e 找出事件的类型...现在它获得了所有 mouseover 事件数据，所以这就是你所看到的。

这应该是对我们所有人的有益教训。首先，请注意 JS 处理对象引用，如果您存储一个不是您的代码创建的对象，然后中断线程，该对象可能会在您下面发生变化。同样，如果您有返回数组或对象的方法，请知道您正在返回对该数组或对象的引用……因此，如果调用代码更改了所述数组或对象的内容，这会使您陷入困境；当您有一个带有公共(public) getter 的私有(private)字段时，这尤其危险。如果您不小心，您可能会交出一个允许代码更改对象内部结构的引用，而您并不想这样做!