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会立即再次触发，导致另一次重新渲染，依此类推，直到你将鼠标放在事件上。

为了防止这种情况，有多种解决方案，例如：标记事件（向其添加属性），并在您的函数中检查它，因此当再次调用它时，您只需跳过。当然，这需要您在mouseout时取消标记该事件。

另一个是您使用变量，如果它与鼠标移动的当前事件标题不同，请保存此新标题并调用重新呈现。在eventRender回调中，检查给定事件是否具有相同的标题，如果是，则更改其边界。

fullcalendar eventMouseover rerenderEvents

1 个答案: