use dropThrottle for puzzle&analysis scroll

ui/analyse/src/treeView.js

@@ -2,8 +2,8 @@ var m = require('mithril');
 var contextMenu = require('./contextMenu');
 var raf = require('chessground').util.requestAnimationFrame;
 var empty = require('common').empty;
-var throttle = require('common').throttle;
 var defined = require('common').defined;
+var dropThrottle = require('common').dropThrottle;
 var game = require('game').game;
 var fixCrazySan = require('chess').fixCrazySan;
 var treePath = require('tree').path;
@@ -11,8 +11,10 @@ var treeOps = require('tree').ops;
 var moveView = require('./moveView');
 var commentAuthorText = require('./study/studyComments').authorText;
 
-var autoScroll = throttle(300, false, function(ctrl, el) {
-  raf(function() {
+var scrollThrottle = dropThrottle(200);
+
+function autoScroll(ctrl, el) {
+  scrollThrottle(function() {
     var cont = el.parentNode;
     if (!cont) return;
     var target = el.querySelector('.active');
@@ -22,7 +24,7 @@ var autoScroll = throttle(300, false, function(ctrl, el) {
     }
     cont.scrollTop = target.offsetTop - cont.offsetHeight / 2 + target.offsetHeight;
   });
-});
+}
 
 function pathContains(ctx, path) {
   return treePath.contains(ctx.ctrl.vm.path, path);
@@ -107,7 +109,7 @@ function renderLines(ctx, nodes, opts) {
     },
     children: nodes.map(function(n) {
       if (n.comp && ctx.ctrl.retro && ctx.ctrl.retro.hideComputerLine(n, opts.parentPath))
-        return lineTag('Learn from this mistake');
+      return lineTag('Learn from this mistake');
       return lineTag(renderMoveAndChildrenOf(ctx, n, {
         parentPath: opts.parentPath,
         isMainline: false,

ui/common/src/main.js

@@ -55,5 +55,20 @@ module.exports = {
       };
     }
   },
-  throttle: require('./throttle')
+  throttle: require('./throttle'),
+  dropThrottle: function(delay) {
+    var task;
+    var run = function(f) {
+      task = f;
+      f();
+      setTimeout(function() {
+        if (task !== f) run(task);
+        else task = undefined;
+      }, delay);
+    };
+    return function(f) {
+      if (task) task = f;
+      else run(f);
+    };
+  }
 };

ui/puzzle/src/view/tree.js

@@ -1,11 +1,13 @@
 var m = require('mithril');
-var throttle = require('common').throttle;
 var defined = require('common').defined;
 var normalizeEval = require('chess').renderEval;
+var dropThrottle = require('common').dropThrottle;
 var treePath = require('tree').path;
 
-var autoScroll = function(ctrl, el) {
-  lichess.requestIdleCallback(function() {
+var scrollThrottle = dropThrottle(150);
+
+function autoScroll(ctrl, el) {
+  scrollThrottle(function() {
     var cont = el.parentNode;
     var target = el.querySelector('.active');
     if (!target) {
@@ -14,7 +16,7 @@ var autoScroll = function(ctrl, el) {
     }
     cont.scrollTop = target.offsetTop - cont.offsetHeight / 2 + target.offsetHeight;
   });
-};
+}
 
 function pathContains(ctx, path) {
   return treePath.contains(ctx.ctrl.vm.path, path);