fullcalendar eventMouseover rerenderEvents

Question

我正在使用多个资源的fullcalendar fork。我想使用回调"eventMouseover"来改变边框颜色为所有事件具有相同的标题，我有这样的东西:

eventMouseover: function( event, jsEvent, view ) {
    //get day viewed
    var currentViewDate = $('#calendar').fullCalendar('getDate')
    var events = $('#calendar').fullCalendar( 'clientEvents', function(event) {
        //get list of events for displayed day
        if (moment(event.start).format('YYYY-MM-DD') == currentViewDate.format('YYYY-MM-DD')) {
            return true;    
        }
    });
    //search events with the same title as event where is mouse over
    for (var i = 0; events.length > i ; i++) {
        if (events[i].title == event.title) {
            events[i].borderColor = 'blue'
            console.log(event.title)
        }
    }
    $('#calendar').fullCalendar( 'rerenderEvents')
}

它可以工作，意味着它改变了特定事件的边框颜色，但是当我把鼠标放在事件上时，会出现奇怪的事情，浏览器的内存使用正在快速增长，CPU占用了大约50%。看起来它在不断地重新渲染事件。

正如你在上面的代码中看到的，我把

console.log(event.title)

检查具有特定标题的事件在控制台中显示的次数。

没有

$('#calendar').fullCalendar( 'rerenderEvents')

计数是正确的，每次当我把鼠标指针在事件，但边界颜色不改变，但是用

$('#calendar').fullCalendar( 'rerenderEvents')

计数是不正确的，每次当鼠标指针在事件上时，控制台的计数不断增长，CPU数目也在增长，内存也在增长。但是，对于视图中具有相同标题的所有事件，边框都会更改。

是否可以执行

$('#calendar').fullCalendar( 'rerenderEvents')

只有一次当鼠标在事件上?或者有人可以用另一种方式帮我。

Answer 1

我认为这里的问题是，当您呈现事件时，eventMouseOver立即再次触发，导致另一次呈现，等等，直到您将鼠标保持在事件上。

为了防止这种情况，有多种解决方案，例如:标记事件(为其添加属性)，并在函数中检查这一点，因此当它再次被调用时，您只需跳过。当然，这需要在鼠标移出时取消对事件的标记。

另一种方法是使用变量，如果它与您鼠标悬停的当前事件标题不同，则保存此新标题并调用呈现程序。在eventRender回调中，检查给定的事件是否具有相同的标题，如果是，更改其边框