鼠标快速滚动事件优化

项目背景

在最近得一个项目中，需要根据鼠标滚轮控制页面移动，再根据页面移动的距离产生不同的动画，但滑动很快时，有些动画还没结束就播放其他动画，且页面滚动异常。

解决思路

1. 首先想的是给鼠标事件加个防抖，如下：

$('body').mousewheel(function(ev,delta){
  clearTimeout(timer); 
  timer = setTimeout(function(){
    //事件处理
  },200)
}) 
复制代码

但只解决了滑动过快时页面滚动异常问题

2. 关于动画还没结束就播放其他动画的问题，想了个设置个状态来控制优化。如下：

var scrolled = true
$('body').mousewheel(function(ev,delta){
  if(scrolled){
    scrolled = false
      clearTimeout(timer); 
      timer = setTimeout(function(){
        //每次动画结束后才能响应其他动画
        $('html,body').animate({scrollTop: 0}, 'normal',"linear",function(){
          scrolled = true
        });
      },200)
  }
}) 
复制代码

在每次动画或移动结束后，scrolled置为true，才能进行下一步的响应。