Question

我有一个时间轴，根据所选日期显示不同的内容。可以通过单击时间轴来选择日期，也可以使用鼠标滚轮滚动。我有一些动画附加到每个内容，以便有不同内容元素的淡出/淡出效果，为此我使用嵌套动画，回调。

我无法做的是，如果快速滚动，则等待上一个动画在下一个动画开始之前结束。或者，更好的是，我在动画函数的开头分离滚动事件，并重新附加它，作为最后animate函数调用的回调：这只是第一次，但不是后续滚动。

有什么想法吗？

功能检测滚动：

      //detect mouse scrolling and determine the direction
        function detectScroll() {
            $('.events-content').first().bind('mousewheel', function (e) {
                var delta = e.originalEvent.wheelDelta;
                if (delta > 0) {
                    jumpToEvent('prev');
                } else {
                    jumpToEvent('next');
                }
            });

            //firefox
            $('.events-content').first().on('DOMMouseScroll', function (e) {
                var delta = e.originalEvent.detail;
                if (delta < 0) {
                    jumpToEvent('prev');
                } else if (delta > 0) {
                    jumpToEvent('next');
                }
            });
        }

功能分离滚动

function detachScroll(){
            console.log('detach');
            $('.events-content').first().unbind('mousewheel');
            $('.events-content').first().off('DOMMouseScroll');
        }

动画功能，由jumpToEvent函数调用，选择要显示的正确内容：

 //display correct content depending on the selected date
function updateVisibleContent(event, eventsContent) {

    var visibleContent = ...., selectedContent =....;

    detachScroll();

    visibleContent.find('....').each(function () {
        $(this).animate({
            opacity: 0 //hide current content
        }, 600, function () { 

            visibleContent.removeClass('selected');
            selectedContent.attr('class', 'selected'); 

            //now show the next content, with 3 subsequent steps (Showing only one for the sake of readability)
            selectedContent.find('...').first().animate({
                opacity: 1
            }, 500, function () {
                     detectScroll();
            });            
        });
    });     
}

Answer 1

您需要在每次动画调用之前添加ORA-06502: PL/SQL: numeric or value error: character string buffer too small ORA-06512: at line 1，这样可以确保在调用下一个动画时没有待处理/正在进行的动画。

Answer 2

您是否尝试过jQuery deferred-object，这是一种等待异步函数完成的方法。

function doAnimations(domElement, i) {
  var dfd = jQuery.Deferred();

  $(domElement[i]).animate({
    //do somthing
  }, 600, function() {
    dfd.resolve
  })

  return dfd.promise();
}

//And this is how you can itterate tru items
(function rec(i){
    if(i >= numbers of itterations) {
    console.log('End')
    return false
  }

  doAnimations(domElement, i).done(function(){
    rec(++i)
  })
})(0)

使用jQuery仅在第一次使用分离事件

2 个答案: