Consistently use arrow functions in plugins

to avoid masking of `this`

.changeset/hip-planets-cough.md

@@ -0,0 +1,42 @@
+---
+"@jspsych/plugin-animation": patch
+"@jspsych/plugin-audio-button-response": patch
+"@jspsych/plugin-audio-keyboard-response": patch
+"@jspsych/plugin-audio-slider-response": patch
+"@jspsych/plugin-call-function": patch
+"@jspsych/plugin-canvas-button-response": patch
+"@jspsych/plugin-canvas-keyboard-response": patch
+"@jspsych/plugin-canvas-slider-response": patch
+"@jspsych/plugin-categorize-html": patch
+"@jspsych/plugin-categorize-image": patch
+"@jspsych/plugin-cloze": patch
+"@jspsych/plugin-external-html": patch
+"@jspsych/plugin-free-sort": patch
+"@jspsych/plugin-fullscreen": patch
+"@jspsych/plugin-html-button-response": patch
+"@jspsych/plugin-html-keyboard-response": patch
+"@jspsych/plugin-html-slider-response": patch
+"@jspsych/plugin-iat-html": patch
+"@jspsych/plugin-iat-image": patch
+"@jspsych/plugin-image-button-response": patch
+"@jspsych/plugin-image-keyboard-response": patch
+"@jspsych/plugin-image-slider-response": patch
+"@jspsych/plugin-maxdiff": patch
+"@jspsych/plugin-preload": patch
+"@jspsych/plugin-resize": patch
+"@jspsych/plugin-same-different-html": patch
+"@jspsych/plugin-same-different-image": patch
+"@jspsych/plugin-serial-reaction-time": patch
+"@jspsych/plugin-serial-reaction-time-mouse": patch
+"@jspsych/plugin-survey-multi-select": patch
+"@jspsych/plugin-video-button-response": patch
+"@jspsych/plugin-video-keyboard-response": patch
+"@jspsych/plugin-video-slider-response": patch
+"@jspsych/plugin-virtual-chinrest": patch
+"@jspsych/plugin-visual-search-circle": patch
+"@jspsych/plugin-webgazer-calibrate": patch
+"@jspsych/plugin-webgazer-init-camera": patch
+"@jspsych/plugin-webgazer-validate": patch
+---
+
+Replace plain functions with arrow functions to avoid masking of `this`

packages/plugin-animation/src/index.ts

@@ -103,7 +103,7 @@ class AnimationPlugin implements JsPsychPlugin<Info> {
       this.jsPsych.finishTrial(trial_data);
     };
 
-    var animate_interval = setInterval(function () {
+    var animate_interval = setInterval(() => {
       var showImage = true;
       if (!trial.render_on_canvas) {
         display_element.innerHTML = ""; // clear everything
@@ -155,7 +155,7 @@ class AnimationPlugin implements JsPsychPlugin<Info> {
       });
 
       if (trial.frame_isi > 0) {
-        this.jsPsych.pluginAPI.setTimeout(function () {
+        this.jsPsych.pluginAPI.setTimeout(() => {
           display_element.querySelector<HTMLElement>("#jspsych-animation-image").style.visibility =
             "hidden";
           current_stim = "blank";
@@ -168,7 +168,7 @@ class AnimationPlugin implements JsPsychPlugin<Info> {
       }
     }
 
-    var after_response = function (info) {
+    var after_response = (info) => {
       responses.push({
         key_press: info.key,
         rt: info.rt,

packages/plugin-audio-button-response/src/index.ts

@@ -106,7 +106,7 @@ class AudioButtonResponsePlugin implements JsPsychPlugin<Info> {
     // load audio file
     this.jsPsych.pluginAPI
       .getAudioBuffer(trial.stimulus)
-      .then(function (buffer) {
+      .then((buffer) => {
         if (context !== null) {
           audio = context.createBufferSource();
           audio.buffer = buffer;
@@ -117,7 +117,7 @@ class AudioButtonResponsePlugin implements JsPsychPlugin<Info> {
         }
         setupTrial();
       })
-      .catch(function (err) {
+      .catch((err) => {
         console.error(
           `Failed to load audio file "${trial.stimulus}". Try checking the file path. We recommend using the preload plugin to load audio files.`
         );
@@ -195,7 +195,7 @@ class AudioButtonResponsePlugin implements JsPsychPlugin<Info> {
 
       // end trial if time limit is set
       if (trial.trial_duration !== null) {
-        this.jsPsych.pluginAPI.setTimeout(function () {
+        this.jsPsych.pluginAPI.setTimeout(() => {
           end_trial();
         }, trial.trial_duration);
       }

packages/plugin-audio-keyboard-response/src/index.ts

@@ -83,7 +83,7 @@ class AudioKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     // load audio file
     this.jsPsych.pluginAPI
       .getAudioBuffer(trial.stimulus)
-      .then(function (buffer) {
+      .then((buffer) => {
         if (context !== null) {
           audio = context.createBufferSource();
           audio.buffer = buffer;
@@ -94,7 +94,7 @@ class AudioKeyboardResponsePlugin implements JsPsychPlugin<Info> {
         }
         setupTrial();
       })
-      .catch(function (err) {
+      .catch((err) => {
         console.error(
           `Failed to load audio file "${trial.stimulus}". Try checking the file path. We recommend using the preload plugin to load audio files.`
         );
@@ -129,7 +129,7 @@ class AudioKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
       // end trial if time limit is set
       if (trial.trial_duration !== null) {
-        this.jsPsych.pluginAPI.setTimeout(function () {
+        this.jsPsych.pluginAPI.setTimeout(() => {
           end_trial();
         }, trial.trial_duration);
       }

packages/plugin-audio-slider-response/src/index.ts

@@ -127,7 +127,7 @@ class AudioSliderResponsePlugin implements JsPsychPlugin<Info> {
     // load audio file
     this.jsPsych.pluginAPI
       .getAudioBuffer(trial.stimulus)
-      .then(function (buffer) {
+      .then((buffer) => {
         if (context !== null) {
           audio = context.createBufferSource();
           audio.buffer = buffer;
@@ -138,7 +138,7 @@ class AudioSliderResponsePlugin implements JsPsychPlugin<Info> {
         }
         setupTrial();
       })
-      .catch(function (err) {
+      .catch((err) => {
         console.error(
           `Failed to load audio file "${trial.stimulus}". Try checking the file path. We recommend using the preload plugin to load audio files.`
         );
@@ -252,7 +252,7 @@ class AudioSliderResponsePlugin implements JsPsychPlugin<Info> {
 
       display_element
         .querySelector("#jspsych-audio-slider-response-next")
-        .addEventListener("click", function () {
+        .addEventListener("click", () => {
           // measure response time
           var endTime = performance.now();
           var rt = Math.round(endTime - startTime);
@@ -285,7 +285,7 @@ class AudioSliderResponsePlugin implements JsPsychPlugin<Info> {
 
       // end trial if trial_duration is set
       if (trial.trial_duration !== null) {
-        this.jsPsych.pluginAPI.setTimeout(function () {
+        this.jsPsych.pluginAPI.setTimeout(() => {
           end_trial();
         }, trial.trial_duration);
       }

packages/plugin-call-function/src/index.ts

@@ -46,7 +46,7 @@ class CallFunctionPlugin implements JsPsychPlugin<Info> {
     };
 
     if (trial.async) {
-      var done = function (data) {
+      var done = (data) => {
         return_val = data;
         end_trial();
       };

packages/plugin-canvas-button-response/src/index.ts

@@ -145,7 +145,7 @@ class CanvasButtonResponsePlugin implements JsPsychPlugin<Info> {
     for (var i = 0; i < trial.choices.length; i++) {
       display_element
         .querySelector<HTMLButtonElement>("#jspsych-canvas-button-response-button-" + i)
-        .addEventListener("click", function (e: MouseEvent) {
+        .addEventListener("click", (e: MouseEvent) => {
           var choice = e.currentTarget as Element;
           choice.getAttribute("data-choice"); // don't use dataset for jsdom compatibility
           after_response(choice);
@@ -203,7 +203,7 @@ class CanvasButtonResponsePlugin implements JsPsychPlugin<Info> {
 
     // hide image if timing is set
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-canvas-button-response-stimulus"
         ).style.visibility = "hidden";
@@ -212,7 +212,7 @@ class CanvasButtonResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if time limit is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         end_trial();
       }, trial.trial_duration);
     }

packages/plugin-canvas-keyboard-response/src/index.ts

@@ -112,7 +112,7 @@ class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     };
 
     // function to handle responses by the subject
-    var after_response = function (info) {
+    var after_response = (info) => {
       // after a valid response, the stimulus will have the CSS class 'responded'
       // which can be used to provide visual feedback that a response was recorded
       display_element.querySelector("#jspsych-canvas-keyboard-response-stimulus").className +=
@@ -141,7 +141,7 @@ class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     // hide stimulus if stimulus_duration is set
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-canvas-keyboard-response-stimulus"
         ).style.visibility = "hidden";
@@ -150,7 +150,7 @@ class CanvasKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if trial_duration is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         end_trial();
       }, trial.trial_duration);
     }

packages/plugin-canvas-slider-response/src/index.ts

@@ -210,7 +210,7 @@ class CanvasSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     display_element
       .querySelector("#jspsych-canvas-slider-response-next")
-      .addEventListener("click", function () {
+      .addEventListener("click", () => {
         // measure response time
         var endTime = performance.now();
         response.rt = Math.round(endTime - startTime);
@@ -228,7 +228,7 @@ class CanvasSliderResponsePlugin implements JsPsychPlugin<Info> {
       });
 
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-canvas-slider-response-stimulus"
         ).style.visibility = "hidden";
@@ -237,9 +237,7 @@ class CanvasSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if trial_duration is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
-        end_trial();
-      }, trial.trial_duration);
     }
 
     var startTime = performance.now();

packages/plugin-categorize-html/src/index.ts

@@ -113,7 +113,7 @@ class CategorizeHtmlPlugin implements JsPsychPlugin<Info> {
 
     // hide image after time if the timing parameter is set
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-categorize-html-stimulus"
         ).style.visibility = "hidden";
@@ -163,7 +163,7 @@ class CategorizeHtmlPlugin implements JsPsychPlugin<Info> {
     });
 
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         after_response({
           key: null,
           rt: null,
@@ -205,7 +205,7 @@ class CategorizeHtmlPlugin implements JsPsychPlugin<Info> {
         correct === false &&
         ((timeout && trial.show_feedback_on_timeout) || !timeout)
       ) {
-        var after_forced_response = function (info) {
+        var after_forced_response = (info) => {
           endTrial();
         };
 
@@ -217,9 +217,7 @@ class CategorizeHtmlPlugin implements JsPsychPlugin<Info> {
           allow_held_key: false,
         });
       } else {
-        this.jsPsych.pluginAPI.setTimeout(function () {
+        this.jsPsych.pluginAPI.setTimeout(endTrial, trial.feedback_duration);
-          endTrial();
-        }, trial.feedback_duration);
       }
     };
   }

packages/plugin-categorize-image/src/index.ts

@@ -112,7 +112,7 @@ class CategorizeImagePlugin implements JsPsychPlugin<Info> {
 
     // hide image after time if the timing parameter is set
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-categorize-image-stimulus"
         ).style.visibility = "hidden";
@@ -162,7 +162,7 @@ class CategorizeImagePlugin implements JsPsychPlugin<Info> {
     });
 
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         after_response({
           key: null,
           rt: null,
@@ -204,7 +204,7 @@ class CategorizeImagePlugin implements JsPsychPlugin<Info> {
         correct === false &&
         ((timeout && trial.show_feedback_on_timeout) || !timeout)
       ) {
-        var after_forced_response = function (info) {
+        var after_forced_response = (info) => {
           endTrial();
         };
 
@@ -216,9 +216,7 @@ class CategorizeImagePlugin implements JsPsychPlugin<Info> {
           allow_held_key: false,
         });
       } else {
-        this.jsPsych.pluginAPI.setTimeout(function () {
+        this.jsPsych.pluginAPI.setTimeout(endTrial, trial.feedback_duration);
-          endTrial();
-        }, trial.feedback_duration);
       }
     };
   }

packages/plugin-cloze/src/index.ts

@@ -25,7 +25,7 @@ const info = <const>{
     mistake_fn: {
       type: ParameterType.FUNCTION,
       pretty_name: "Mistake function",
-      default: function () {},
+      default: () => {},
     },
   },
 };

packages/plugin-external-html/src/index.ts

@@ -25,9 +25,7 @@ const info = <const>{
     check_fn: {
       type: ParameterType.FUNCTION,
       pretty_name: "Check function",
-      default: function () {
+      default: () => true,
-        return true;
-      },
     },
     /** Whether or not to force a page refresh. */
     force_refresh: {
@@ -74,7 +72,7 @@ class ExternalHtmlPlugin implements JsPsychPlugin<Info> {
     const load = (element, file, callback) => {
       var xmlhttp = new XMLHttpRequest();
       xmlhttp.open("GET", file, true);
-      xmlhttp.onload = function () {
+      xmlhttp.onload = () => {
         if (xmlhttp.status == 200 || xmlhttp.status == 0) {
           //Check if loaded
           element.innerHTML = xmlhttp.responseText;

packages/plugin-free-sort/src/index.ts

@@ -356,7 +356,7 @@ class FreeSortPlugin implements JsPsychPlugin<Info> {
     }
 
     for (let i = 0; i < draggables.length; i++) {
-      draggables[i].addEventListener(start_event_name, function (event: MouseEvent | TouchEvent) {
+      draggables[i].addEventListener(start_event_name, (event: MouseEvent | TouchEvent) => {
         let pageX: number;
         let pageY: number;
         if (event instanceof MouseEvent) {
@@ -377,7 +377,7 @@ class FreeSortPlugin implements JsPsychPlugin<Info> {
         let y = pageY - elem.offsetTop - window.scrollY;
         elem.style.transform = "scale(" + trial.scale_factor + "," + trial.scale_factor + ")";
 
-        let move_event = function (e) {
+        let move_event = (e) => {
           let clientX = e.clientX;
           let clientY = e.clientY;
           if (typeof document.ontouchend !== "undefined") {
@@ -439,7 +439,7 @@ class FreeSortPlugin implements JsPsychPlugin<Info> {
         };
         document.addEventListener(move_event_name, move_event);
 
-        var end_event = function (e) {
+        var end_event = (e) => {
           document.removeEventListener(move_event_name, move_event);
           elem.style.transform = "scale(1, 1)";
           if (trial.change_border_background_color) {

packages/plugin-fullscreen/src/index.ts

@@ -54,7 +54,7 @@ class FullscreenPlugin implements JsPsychPlugin<Info> {
     const endTrial = () => {
       display_element.innerHTML = "";
 
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         var trial_data = {
           success: !keyboardNotAllowed,
         };
@@ -78,7 +78,7 @@ class FullscreenPlugin implements JsPsychPlugin<Info> {
           "</button>";
         var listener = display_element
           .querySelector("#jspsych-fullscreen-btn")
-          .addEventListener("click", function () {
+          .addEventListener("click", () => {
             var element = document.documentElement;
             if (element.requestFullscreen) {
               element.requestFullscreen();

packages/plugin-html-button-response/src/index.ts

@@ -125,7 +125,7 @@ class HtmlButtonResponsePlugin implements JsPsychPlugin<Info> {
     for (var i = 0; i < trial.choices.length; i++) {
       display_element
         .querySelector("#jspsych-html-button-response-button-" + i)
-        .addEventListener("click", function (e) {
+        .addEventListener("click", (e) => {
           var btn_el = e.currentTarget as HTMLButtonElement;
           var choice = btn_el.getAttribute("data-choice"); // don't use dataset for jsdom compatibility
           after_response(choice);
@@ -184,7 +184,7 @@ class HtmlButtonResponsePlugin implements JsPsychPlugin<Info> {
 
     // hide image if timing is set
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-html-button-response-stimulus"
         ).style.visibility = "hidden";
@@ -193,9 +193,7 @@ class HtmlButtonResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if time limit is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
-        end_trial();
-      }, trial.trial_duration);
     }
   }
 }

packages/plugin-html-keyboard-response/src/index.ts

@@ -111,7 +111,7 @@ class HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     };
 
     // function to handle responses by the subject
-    var after_response = function (info) {
+    var after_response = (info) => {
       // after a valid response, the stimulus will have the CSS class 'responded'
       // which can be used to provide visual feedback that a response was recorded
       display_element.querySelector("#jspsych-html-keyboard-response-stimulus").className +=
@@ -140,7 +140,7 @@ class HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     // hide stimulus if stimulus_duration is set
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-html-keyboard-response-stimulus"
         ).style.visibility = "hidden";
@@ -149,9 +149,7 @@ class HtmlKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if trial_duration is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
-        end_trial();
-      }, trial.trial_duration);
     }
   }
 }

packages/plugin-html-slider-response/src/index.ts

@@ -203,7 +203,7 @@ class HtmlSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     display_element
       .querySelector("#jspsych-html-slider-response-next")
-      .addEventListener("click", function () {
+      .addEventListener("click", () => {
         // measure response time
         var endTime = performance.now();
         response.rt = Math.round(endTime - startTime);
@@ -221,7 +221,7 @@ class HtmlSliderResponsePlugin implements JsPsychPlugin<Info> {
       });
 
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-html-slider-response-stimulus"
         ).style.visibility = "hidden";
@@ -230,9 +230,7 @@ class HtmlSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if trial_duration is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
-        end_trial();
-      }, trial.trial_duration);
     }
 
     var startTime = performance.now();

packages/plugin-iat-html/src/index.ts

@@ -294,7 +294,7 @@ class IatHtmlPlugin implements JsPsychPlugin<Info> {
 
     // end trial if time limit is set
     if (trial.trial_duration !== null && trial.response_ends_trial != true) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         end_trial();
       }, trial.trial_duration);
     }

packages/plugin-iat-image/src/index.ts

@@ -294,7 +294,7 @@ class IatImagePlugin implements JsPsychPlugin<Info> {
 
     // end trial if time limit is set
     if (trial.trial_duration !== null && trial.response_ends_trial != true) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         end_trial();
       }, trial.trial_duration);
     }

packages/plugin-image-button-response/src/index.ts

@@ -123,7 +123,7 @@ class ImageButtonResponsePlugin implements JsPsychPlugin<Info> {
       canvas.style.padding = "0";
       var ctx = canvas.getContext("2d");
       var img = new Image();
-      img.onload = function () {
+      img.onload = () => {
         // if image wasn't preloaded, then it will need to be drawn whenever it finishes loading
         if (!image_drawn) {
           getHeightWidth(); // only possible to get width/height after image loads
@@ -278,7 +278,7 @@ class ImageButtonResponsePlugin implements JsPsychPlugin<Info> {
     for (var i = 0; i < trial.choices.length; i++) {
       display_element
         .querySelector("#jspsych-image-button-response-button-" + i)
-        .addEventListener("click", function (e) {
+        .addEventListener("click", (e) => {
           var btn_el = e.currentTarget as HTMLButtonElement;
           var choice = btn_el.getAttribute("data-choice"); // don't use dataset for jsdom compatibility
           after_response(choice);
@@ -337,7 +337,7 @@ class ImageButtonResponsePlugin implements JsPsychPlugin<Info> {
 
     // hide image if timing is set
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-image-button-response-stimulus"
         ).style.visibility = "hidden";
@@ -346,7 +346,7 @@ class ImageButtonResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if time limit is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         end_trial();
       }, trial.trial_duration);
     } else if (trial.response_ends_trial === false) {

packages/plugin-image-keyboard-response/src/index.ts

@@ -102,7 +102,7 @@ class ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {
       canvas.style.padding = "0";
       var ctx = canvas.getContext("2d");
       var img = new Image();
-      img.onload = function () {
+      img.onload = () => {
         // if image wasn't preloaded, then it will need to be drawn whenever it finishes loading
         if (!image_drawn) {
           getHeightWidth(); // only possible to get width/height after image loads
@@ -213,7 +213,7 @@ class ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     };
 
     // function to handle responses by the subject
-    var after_response = function (info) {
+    var after_response = (info) => {
       // after a valid response, the stimulus will have the CSS class 'responded'
       // which can be used to provide visual feedback that a response was recorded
       display_element.querySelector("#jspsych-image-keyboard-response-stimulus").className +=
@@ -242,7 +242,7 @@ class ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     // hide stimulus if stimulus_duration is set
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-image-keyboard-response-stimulus"
         ).style.visibility = "hidden";
@@ -251,7 +251,7 @@ class ImageKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if trial_duration is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         end_trial();
       }, trial.trial_duration);
     } else if (trial.response_ends_trial === false) {

packages/plugin-image-slider-response/src/index.ts

@@ -153,7 +153,7 @@ class ImageSliderResponsePlugin implements JsPsychPlugin<Info> {
       canvas.style.padding = "0";
       var ctx = canvas.getContext("2d");
       var img = new Image();
-      img.onload = function () {
+      img.onload = () => {
         // if image wasn't preloaded, then it will need to be drawn whenever it finishes loading
         if (!image_drawn) {
           getHeightWidth(); // only possible to get width/height after image loads
@@ -386,7 +386,7 @@ class ImageSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     display_element
       .querySelector("#jspsych-image-slider-response-next")
-      .addEventListener("click", function () {
+      .addEventListener("click", () => {
         // measure response time
         var endTime = performance.now();
         response.rt = Math.round(endTime - startTime);
@@ -404,7 +404,7 @@ class ImageSliderResponsePlugin implements JsPsychPlugin<Info> {
       });
 
     if (trial.stimulus_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         display_element.querySelector<HTMLElement>(
           "#jspsych-image-slider-response-stimulus"
         ).style.visibility = "hidden";
@@ -413,7 +413,7 @@ class ImageSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if trial_duration is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         end_trial();
       }, trial.trial_duration);
     }

packages/plugin-maxdiff/src/index.ts

@@ -136,10 +136,10 @@ class MaxdiffPlugin implements JsPsychPlugin<Info> {
     // first checks that the same alternative cannot be endorsed in the left and right columns simultaneously.
     // then enables the submit button if the trial is required.
     const left_right = ["left", "right"];
-    left_right.forEach(function (p) {
+    left_right.forEach((p) => {
       // Get all elements either 'left' or 'right'
-      document.getElementsByName(p).forEach(function (alt) {
+      document.getElementsByName(p).forEach((alt) => {
-        alt.addEventListener("click", function () {
+        alt.addEventListener("click", () => {
           // Find the opposite (if left, then right & vice versa) identified by the class (jspsych-maxdiff-alt-1, 2, etc)
           var op = alt["name"] == "left" ? "right" : "left";
           var n = document.getElementsByClassName(alt.className).namedItem(op);

packages/plugin-preload/src/index.ts

@@ -240,7 +240,7 @@ class PreloadPlugin implements JsPsychPlugin<Info> {
       // show detailed errors, if necessary
       if (trial.show_detailed_errors) {
         display_element.innerHTML += "<p><strong>Error details:</strong></p>";
-        detailed_errors.forEach(function (e) {
+        detailed_errors.forEach((e) => {
           display_element.innerHTML += e;
         });
       }
@@ -284,13 +284,13 @@ class PreloadPlugin implements JsPsychPlugin<Info> {
         this.jsPsych.pluginAPI.preloadImages(images, cb, file_loading_success, file_loading_error);
       };
       if (video.length > 0) {
-        load_video(function () {});
+        load_video(() => {});
       }
       if (audio.length > 0) {
-        load_audio(function () {});
+        load_audio(() => {});
       }
       if (images.length > 0) {
-        load_images(function () {});
+        load_images(() => {});
       }
     }
 

packages/plugin-resize/src/index.ts

@@ -108,7 +108,7 @@ class ResizePlugin implements JsPsychPlugin<Info> {
     };
 
     // listens for the click
-    document.getElementById("jspsych-resize-btn").addEventListener("click", function () {
+    document.getElementById("jspsych-resize-btn").addEventListener("click", () => {
       scale();
       end_trial();
     });
@@ -117,7 +117,7 @@ class ResizePlugin implements JsPsychPlugin<Info> {
     var origin_x, origin_y;
     var cx, cy;
 
-    var mousedownevent = function (e) {
+    var mousedownevent = (e) => {
       e.preventDefault();
       dragging = true;
       origin_x = e.pageX;
@@ -130,7 +130,7 @@ class ResizePlugin implements JsPsychPlugin<Info> {
       .querySelector("#jspsych-resize-handle")
       .addEventListener("mousedown", mousedownevent);
 
-    var mouseupevent = function (e) {
+    var mouseupevent = (e) => {
       dragging = false;
     };
 
@@ -138,7 +138,7 @@ class ResizePlugin implements JsPsychPlugin<Info> {
 
     var scale_div: HTMLDivElement = display_element.querySelector("#jspsych-resize-div");
 
-    var resizeevent = function (e) {
+    var resizeevent = (e) => {
       if (dragging) {
         var dx = e.pageX - origin_x;
         var dy = e.pageY - origin_y;

packages/plugin-same-different-html/src/index.ts

@@ -77,7 +77,7 @@ class SameDifferentHtmlPlugin implements JsPsychPlugin<Info> {
 
     var first_stim_info: { key: string; rt: number };
     if (trial.first_stim_duration > 0) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         showBlankScreen();
       }, trial.first_stim_duration);
     } else {
@@ -97,9 +97,7 @@ class SameDifferentHtmlPlugin implements JsPsychPlugin<Info> {
     const showBlankScreen = () => {
       display_element.innerHTML = "";
 
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(showSecondStim, trial.gap_duration);
-        showSecondStim();
-      }, trial.gap_duration);
     };
 
     const showSecondStim = () => {
@@ -111,7 +109,7 @@ class SameDifferentHtmlPlugin implements JsPsychPlugin<Info> {
       display_element.innerHTML = html;
 
       if (trial.second_stim_duration > 0) {
-        this.jsPsych.pluginAPI.setTimeout(function () {
+        this.jsPsych.pluginAPI.setTimeout(() => {
           display_element.querySelector<HTMLElement>(
             ".jspsych-same-different-stimulus"
           ).style.visibility = "hidden";

packages/plugin-same-different-image/src/index.ts

@@ -72,14 +72,18 @@ class SameDifferentImagePlugin implements JsPsychPlugin<Info> {
   constructor(private jsPsych: JsPsych) {}
 
   trial(display_element: HTMLElement, trial: TrialType<Info>) {
+    const showBlankScreen = () => {
+      display_element.innerHTML = "";
+
+      this.jsPsych.pluginAPI.setTimeout(showSecondStim(), trial.gap_duration);
+    };
+
     display_element.innerHTML =
       '<img class="jspsych-same-different-stimulus" src="' + trial.stimuli[0] + '"></img>';
 
     var first_stim_info: { key: string; rt: number };
     if (trial.first_stim_duration > 0) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(showBlankScreen, trial.first_stim_duration);
-        showBlankScreen();
-      }, trial.first_stim_duration);
     } else {
       const afterKeyboardResponse = (info: { key: string; rt: number }) => {
         first_stim_info = info;
@@ -94,14 +98,6 @@ class SameDifferentImagePlugin implements JsPsychPlugin<Info> {
       });
     }
 
-    const showBlankScreen = () => {
-      display_element.innerHTML = "";
-
-      this.jsPsych.pluginAPI.setTimeout(function () {
-        showSecondStim();
-      }, trial.gap_duration);
-    };
-
     const showSecondStim = () => {
       var html =
         '<img class="jspsych-same-different-stimulus" src="' + trial.stimuli[1] + '"></img>';
@@ -113,7 +109,7 @@ class SameDifferentImagePlugin implements JsPsychPlugin<Info> {
       display_element.innerHTML = html;
 
       if (trial.second_stim_duration > 0) {
-        this.jsPsych.pluginAPI.setTimeout(function () {
+        this.jsPsych.pluginAPI.setTimeout(() => {
           display_element.querySelector<HTMLElement>(
             ".jspsych-same-different-stimulus"
           ).style.visibility = "hidden";

packages/plugin-serial-reaction-time-mouse/src/index.ts

@@ -105,7 +105,7 @@ class SerialReactionTimeMousePlugin implements JsPsychPlugin<Info> {
         );
       }
       for (var i = 0; i < resp_targets.length; i++) {
-        resp_targets[i].addEventListener("mousedown", function (e) {
+        resp_targets[i].addEventListener("mousedown", (e) => {
           if (startTime == -1) {
             return;
           } else {
@@ -145,9 +145,7 @@ class SerialReactionTimeMousePlugin implements JsPsychPlugin<Info> {
     if (trial.pre_target_duration <= 0) {
       showTarget();
     } else {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(showTarget, trial.pre_target_duration);
-        showTarget();
-      }, trial.pre_target_duration);
     }
 
     //show prompt if there is one

packages/plugin-serial-reaction-time/src/index.ts

@@ -216,9 +216,7 @@ class SerialReactionTimePlugin implements JsPsychPlugin<Info> {
     if (trial.pre_target_duration <= 0) {
       showTarget();
     } else {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(showTarget(), trial.pre_target_duration);
-        showTarget();
-      }, trial.pre_target_duration);
     }
 
     //show prompt if there is one

packages/plugin-survey-multi-select/src/index.ts

@@ -92,9 +92,7 @@ class SurveyMultiSelectPlugin implements JsPsychPlugin<Info> {
   trial(display_element: HTMLElement, trial: TrialType<Info>) {
     var plugin_id_name = "jspsych-survey-multi-select";
     var plugin_id_selector = "#" + plugin_id_name;
-    const _join = function (...args: Array<string | number>) {
+    const _join = (...args: Array<string | number>) => args.join("-");
-      return args.join("-");
-    };
 
     // inject CSS for trial
     var cssstr =
@@ -206,7 +204,7 @@ class SurveyMultiSelectPlugin implements JsPsychPlugin<Info> {
     // then submit the form
     display_element
       .querySelector("#jspsych-survey-multi-select-next")
-      .addEventListener("click", function () {
+      .addEventListener("click", () => {
         for (var i = 0; i < trial.questions.length; i++) {
           if (trial.questions[i].required) {
             if (

packages/plugin-video-button-response/src/index.ts

@@ -222,7 +222,7 @@ class VideoButtonResponsePlugin implements JsPsychPlugin<Info> {
       video_element.src = video_preload_blob;
     }
 
-    video_element.onended = function () {
+    video_element.onended = () => {
       if (trial.trial_ends_after_video) {
         end_trial();
       } else if (!trial.response_allowed_while_playing) {
@@ -236,7 +236,7 @@ class VideoButtonResponsePlugin implements JsPsychPlugin<Info> {
     // before showing and playing, so that the video doesn't automatically show the first frame
     if (trial.start !== null) {
       video_element.pause();
-      video_element.onseeked = function () {
+      video_element.onseeked = () => {
         video_element.style.visibility = "visible";
         video_element.muted = false;
         if (trial.autoplay) {
@@ -244,11 +244,11 @@ class VideoButtonResponsePlugin implements JsPsychPlugin<Info> {
         } else {
           video_element.pause();
         }
-        video_element.onseeked = function () {};
+        video_element.onseeked = () => {};
       };
-      video_element.onplaying = function () {
+      video_element.onplaying = () => {
         video_element.currentTime = trial.start;
-        video_element.onplaying = function () {};
+        video_element.onplaying = () => {};
       };
       // fix for iOS/MacOS browsers: videos aren't seekable until they start playing, so need to hide/mute, play,
       // change current time, then show/unmute
@@ -258,7 +258,7 @@ class VideoButtonResponsePlugin implements JsPsychPlugin<Info> {
 
     let stopped = false;
     if (trial.stop !== null) {
-      video_element.addEventListener("timeupdate", function (e) {
+      video_element.addEventListener("timeupdate", (e) => {
         var currenttime = video_element.currentTime;
         if (currenttime >= trial.stop) {
           video_element.pause();
@@ -296,7 +296,7 @@ class VideoButtonResponsePlugin implements JsPsychPlugin<Info> {
         .pause();
       display_element.querySelector<HTMLVideoElement>(
         "#jspsych-video-button-response-stimulus"
-      ).onended = function () {};
+      ).onended = () => {};
 
       // gather the data to store for the trial
       var trial_data = {
@@ -361,9 +361,7 @@ class VideoButtonResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if time limit is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
-        end_trial();
-      }, trial.trial_duration);
     }
   }
 }

packages/plugin-video-keyboard-response/src/index.ts

@@ -189,7 +189,7 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     // before showing and playing, so that the video doesn't automatically show the first frame
     if (trial.start !== null) {
       video_element.pause();
-      video_element.onseeked = function () {
+      video_element.onseeked = () => {
         video_element.style.visibility = "visible";
         video_element.muted = false;
         if (trial.autoplay) {
@@ -197,11 +197,11 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
         } else {
           video_element.pause();
         }
-        video_element.onseeked = function () {};
+        video_element.onseeked = () => {};
       };
-      video_element.onplaying = function () {
+      video_element.onplaying = () => {
         video_element.currentTime = trial.start;
-        video_element.onplaying = function () {};
+        video_element.onplaying = () => {};
       };
       // fix for iOS/MacOS browsers: videos aren't seekable until they start playing, so need to hide/mute, play,
       // change current time, then show/unmute
@@ -211,7 +211,7 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     let stopped = false;
     if (trial.stop !== null) {
-      video_element.addEventListener("timeupdate", function (e) {
+      video_element.addEventListener("timeupdate", (e) => {
         var currenttime = video_element.currentTime;
         if (currenttime >= trial.stop) {
           video_element.pause();
@@ -246,7 +246,7 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
         .pause();
       display_element.querySelector<HTMLVideoElement>(
         "#jspsych-video-keyboard-response-stimulus"
-      ).onended = function () {};
+      ).onended = () => {};
 
       // gather the data to store for the trial
       var trial_data = {
@@ -263,7 +263,7 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
     };
 
     // function to handle responses by the subject
-    var after_response = function (info) {
+    var after_response = (info) => {
       // after a valid response, the stimulus will have the CSS class 'responded'
       // which can be used to provide visual feedback that a response was recorded
       display_element.querySelector("#jspsych-video-keyboard-response-stimulus").className +=
@@ -292,9 +292,7 @@ class VideoKeyboardResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if time limit is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
-        end_trial();
-      }, trial.trial_duration);
     }
   }
 }

packages/plugin-video-slider-response/src/index.ts

@@ -270,7 +270,7 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
       video_element.src = video_preload_blob;
     }
 
-    video_element.onended = function () {
+    video_element.onended = () => {
       if (trial.trial_ends_after_video) {
         end_trial();
       } else if (!trial.response_allowed_while_playing) {
@@ -284,7 +284,7 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
     // before showing and playing, so that the video doesn't automatically show the first frame
     if (trial.start !== null) {
       video_element.pause();
-      video_element.onseeked = function () {
+      video_element.onseeked = () => {
         video_element.style.visibility = "visible";
         video_element.muted = false;
         if (trial.autoplay) {
@@ -292,11 +292,11 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
         } else {
           video_element.pause();
         }
-        video_element.onseeked = function () {};
+        video_element.onseeked = () => {};
       };
-      video_element.onplaying = function () {
+      video_element.onplaying = () => {
         video_element.currentTime = trial.start;
-        video_element.onplaying = function () {};
+        video_element.onplaying = () => {};
       };
       // fix for iOS/MacOS browsers: videos aren't seekable until they start playing, so need to hide/mute, play,
       // change current time, then show/unmute
@@ -306,7 +306,7 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     let stopped = false;
     if (trial.stop !== null) {
-      video_element.addEventListener("timeupdate", function (e) {
+      video_element.addEventListener("timeupdate", (e) => {
         var currenttime = video_element.currentTime;
         if (currenttime >= trial.stop) {
           video_element.pause();
@@ -356,7 +356,7 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
         .pause();
       display_element.querySelector<HTMLVideoElement>(
         "#jspsych-video-slider-response-stimulus-video"
-      ).onended = function () {};
+      ).onended = () => {};
 
       // gather the data to store for the trial
       var trial_data = {
@@ -376,7 +376,7 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     display_element
       .querySelector("#jspsych-video-slider-response-next")
-      .addEventListener("click", function () {
+      .addEventListener("click", () => {
         // measure response time
         var endTime = performance.now();
         response.rt = Math.round(endTime - startTime);
@@ -407,9 +407,7 @@ class VideoSliderResponsePlugin implements JsPsychPlugin<Info> {
 
     // end trial if time limit is set
     if (trial.trial_duration !== null) {
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(end_trial, trial.trial_duration);
-        end_trial();
-      }, trial.trial_duration);
     }
   }
 }

packages/plugin-virtual-chinrest/src/index.ts

@@ -421,14 +421,14 @@ class VirtualChinrestPlugin implements JsPsychPlugin<Info> {
     function animateBall() {
       window.ball
         .animate(7000)
-        .during(function (pos) {
+        .during((pos) => {
           let moveX = -pos * blindspot_config_data["ballX"];
           window.moveX = moveX;
           let moveY = 0;
           window.ball.attr({ transform: "translate(" + moveX + "," + moveY + ")" }); //jqueryToVanilla: el.getAttribute('');
         })
         .loop(true, false)
-        .after(function () {
+        .after(() => {
           animateBall();
         });
     }

packages/plugin-visual-search-circle/src/index.ts

@@ -191,7 +191,7 @@ class VisualSearchCirclePlugin implements JsPsychPlugin<Info> {
         "px;'></img>";
 
       // wait
-      this.jsPsych.pluginAPI.setTimeout(function () {
+      this.jsPsych.pluginAPI.setTimeout(() => {
         // after wait is over
         show_search_array();
       }, trial.fixation_duration);
@@ -262,7 +262,7 @@ class VisualSearchCirclePlugin implements JsPsychPlugin<Info> {
       });
 
       if (trial.trial_duration !== null) {
-        this.jsPsych.pluginAPI.setTimeout(function () {
+        this.jsPsych.pluginAPI.setTimeout(() => {
           if (!trial_over) {
             this.jsPsych.pluginAPI.cancelKeyboardResponse(key_listener);
 

packages/plugin-webgazer-calibrate/src/index.ts

@@ -124,7 +124,7 @@ class WebgazerCalibratePlugin implements JsPsychPlugin<Info> {
 
       if (trial.calibration_mode == "click") {
         pt_dom.style.cursor = "pointer";
-        pt_dom.addEventListener("click", function () {
+        pt_dom.addEventListener("click", () => {
           next_calibration_point();
         });
       }

packages/plugin-webgazer-init-camera/src/index.ts

@@ -107,7 +107,7 @@ class WebgazerInitCameraPlugin implements JsPsychPlugin<Info> {
         });
       }
 
-      document.querySelector("#jspsych-wg-cont").addEventListener("click", function () {
+      document.querySelector("#jspsych-wg-cont").addEventListener("click", () => {
         if (observer) {
           observer.disconnect();
         }

packages/plugin-webgazer-validate/src/index.ts

@@ -315,7 +315,7 @@ class WebgazerValidatePlugin implements JsPsychPlugin<Info> {
     }
 
     function calculateGazeCentroid(gazeData) {
-      var x_diff_m = gazeData.reduce(function (accumulator, currentValue, index) {
+      var x_diff_m = gazeData.reduce((accumulator, currentValue, index) => {
         accumulator += currentValue.dx;
         if (index == gazeData.length - 1) {
           return accumulator / gazeData.length;
@@ -324,7 +324,7 @@ class WebgazerValidatePlugin implements JsPsychPlugin<Info> {
         }
       }, 0);
 
-      var y_diff_m = gazeData.reduce(function (accumulator, currentValue, index) {
+      var y_diff_m = gazeData.reduce((accumulator, currentValue, index) => {
         accumulator += currentValue.dy;
         if (index == gazeData.length - 1) {
           return accumulator / gazeData.length;
@@ -334,9 +334,7 @@ class WebgazerValidatePlugin implements JsPsychPlugin<Info> {
       }, 0);
 
       var median_distance = median(
-        gazeData.map(function (x) {
+        gazeData.map((x) => Math.sqrt(Math.pow(x.dx - x_diff_m, 2) + Math.pow(x.dy - y_diff_m, 2)))
-          return Math.sqrt(Math.pow(x.dx - x_diff_m, 2) + Math.pow(x.dy - y_diff_m, 2));
-        })
       );
 
       return {
@@ -347,10 +345,8 @@ class WebgazerValidatePlugin implements JsPsychPlugin<Info> {
     }
 
     function calculatePercentInROI(gazeData) {
-      var distances = gazeData.map(function (p) {
+      var distances = gazeData.map((p) => Math.sqrt(Math.pow(p.dx, 2) + Math.pow(p.dy, 2)));
-        return Math.sqrt(Math.pow(p.dx, 2) + Math.pow(p.dy, 2));
+      var sum_in_roi = distances.reduce((accumulator, currentValue) => {
-      });
-      var sum_in_roi = distances.reduce(function (accumulator, currentValue) {
         if (currentValue <= trial.roi_radius) {
           accumulator++;
         }
@@ -371,21 +367,11 @@ class WebgazerValidatePlugin implements JsPsychPlugin<Info> {
           for (var j = 1; j < gazeData[i].length; j++) {
             t_diff.push(gazeData[i][j].t - gazeData[i][j - 1].t);
           }
-          mean_diff.push(
+          mean_diff.push(t_diff.reduce((a, b) => a + b, 0) / t_diff.length);
-            t_diff.reduce(function (a, b) {
-              return a + b;
-            }, 0) / t_diff.length
-          );
         }
       }
       if (mean_diff.length > 0) {
-        return (
+        return 1000 / (mean_diff.reduce((a, b) => a + b, 0) / mean_diff.length);
-          1000 /
-          (mean_diff.reduce(function (a, b) {
-            return a + b;
-          }, 0) /
-            mean_diff.length)
-        );
       } else {
         return null;
       }