debounce the turnOn callback

Author: cpsievert

R/highlight.R

@@ -43,6 +43,9 @@
 #' @param opacityDim a number between 0 and 1 used to reduce the
 #' opacity of non-selected traces (by multiplying with the existing opacity).
 #' @param selected attributes of the selection, see [attrs_selected()].
+#' @param debounce amount of time to wait before firing an event (in milliseconds). 
+#' This is especially useful when `on = "plotly_hover"` to avoid firing too many events
+#' when users clickly move the mouse over relevant graphical marks.
 #' @param ... currently not supported.
 #' @export
 #' @author Carson Sievert
@@ -80,7 +83,8 @@ highlight <- function(p, on = "plotly_click", off,
                       dynamic = FALSE, color = NULL,
                       selectize = FALSE, defaultValues = NULL,
                       opacityDim = getOption("opacityDim", 0.2), 
-                      selected = attrs_selected(), ...) {
+                      selected = attrs_selected(), debounce = 1,
+                      ...) {
 
   # currently ... is not-supported and will catch 
   # some arguments we supported at one point 
@@ -154,7 +158,8 @@ highlight <- function(p, on = "plotly_click", off,
     selectize = selectize,
     defaultValues = defaultValues,
     opacityDim = opacityDim,
-    selected = selected
+    selected = selected,
+    debounce = debounce
   )
 
   p

inst/htmlwidgets/plotly.js

@@ -460,7 +460,7 @@ HTMLWidgets.widget({
       selection.on("change", selectionChange);
 
       // Set a crosstalk variable selection value, triggering an update
-      graphDiv.on(x.highlight.on, function turnOn(e) {
+      var turnOn = function(e) {
         if (e) {
           var selectedKeys = pointsToKeys(e.points);
           // Keys are group names, values are array of selected keys from group.
@@ -470,7 +470,9 @@ HTMLWidgets.widget({
             }
           }
         }
-      });
+      };
+      
+      graphDiv.on(x.highlight.on, debounce(turnOn, x.highlight.debounce));
 
       graphDiv.on(x.highlight.off, function turnOff(e) {
         // remove any visual clues
@@ -878,3 +880,25 @@ function removeBrush(el) {
     outlines[i].remove();
   }
 }
+
+
+// https://davidwalsh.name/javascript-debounce-function
+
+// Returns a function, that, as long as it continues to be invoked, will not
+// be triggered. The function will be called after it stops being called for
+// N milliseconds. If `immediate` is passed, trigger the function on the
+// leading edge, instead of the trailing.
+function debounce(func, wait, immediate) {
+	var timeout;
+	return function() {
+		var context = this, args = arguments;
+		var later = function() {
+			timeout = null;
+			if (!immediate) func.apply(context, args);
+		};
+		var callNow = immediate && !timeout;
+		clearTimeout(timeout);
+		timeout = setTimeout(later, wait);
+		if (callNow) func.apply(context, args);
+	};
+};