[BUGFIX] Fix binding to `this` in event API

This patch ensures `this` is correctly bound to the triggering element
which is mandatory for event delegation.

Resolves: #90618
Releases: master
Change-Id: Icddcce55bbd62c452ac419d120ef9550b91cb306
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/63526


Tested-by: TYPO3com <noreply@typo3.com>
Tested-by: Benni Mack <benni@typo3.org>
Reviewed-by: Benni Mack <benni@typo3.org>

Build/Sources/TypeScript/core/Resources/Public/TypeScript/Event/DebounceEvent.ts

@@ -27,24 +27,20 @@ class DebounceEvent extends RegularEvent {
   private debounce(callback: Listener, wait: number, immediate: boolean): Listener {
     let timeout: number = null;
 
-    return () => {
-      const context: any = this;
-      const args = arguments;
-      const later = function() {
-        timeout = null;
-        if (!immediate) {
-          callback.apply(context, args);
-        }
-      };
-
+    return function (this: Node, ...args: any[]): void {
       const callNow = immediate && !timeout;
 
       // Reset timeout handler to make sure the callback is executed once
       clearTimeout(timeout);
       if (callNow) {
-        callback.apply(context, args);
+        callback.apply(this, args);
       } else {
-        timeout = setTimeout(later, wait);
+        timeout = setTimeout((): void => {
+          timeout = null;
+          if (!immediate) {
+            callback.apply(this, args);
+          }
+        }, wait);
       }
     };
   }

Build/Sources/TypeScript/core/Resources/Public/TypeScript/Event/ThrottleEvent.ts

@@ -26,16 +26,19 @@ class ThrottleEvent extends RegularEvent {
   private throttle(callback: Listener, limit: number): Listener {
     let wait: boolean = false;
 
-    return () => {
+    return function (this: Node, ...args: any[]): void {
       if (wait) {
         return;
       }
 
-      callback.apply(null, arguments);
+      callback.apply(this, args);
       wait = true;
 
-      setTimeout(function () {
+      setTimeout((): void => {
         wait = false;
+
+        // Wait time is over, execute callback again to have final state
+        callback.apply(this, args);
       }, limit);
     };
   }

typo3/sysext/core/Resources/Public/JavaScript/Event/DebounceEvent.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-define(["require","exports","./RegularEvent"],(function(e,t,n){"use strict";return class extends n{constructor(e,t,n=250,u=!1){super(e,t),this.callback=this.debounce(this.callback,n,u)}debounce(e,t,n){let u=null;return()=>{const c=this,l=arguments,s=function(){u=null,n||e.apply(c,l)},r=n&&!u;clearTimeout(u),r?e.apply(c,l):u=setTimeout(s,t)}}}}));
\ No newline at end of file
+define(["require","exports","./RegularEvent"],(function(e,t,n){"use strict";return class extends n{constructor(e,t,n=250,s=!1){super(e,t),this.callback=this.debounce(this.callback,n,s)}debounce(e,t,n){let s=null;return function(...u){const c=n&&!s;clearTimeout(s),c?e.apply(this,u):s=setTimeout(()=>{s=null,n||e.apply(this,u)},t)}}}}));
\ No newline at end of file

typo3/sysext/core/Resources/Public/JavaScript/Event/ThrottleEvent.js

@@ -10,4 +10,4 @@
  *
  * The TYPO3 project - inspiring people to share!
  */
-define(["require","exports","./RegularEvent"],(function(t,e,r){"use strict";return class extends r{constructor(t,e,r){super(t,e),this.callback=this.throttle(e,r)}throttle(t,e){let r=!1;return()=>{r||(t.apply(null,arguments),r=!0,setTimeout((function(){r=!1}),e))}}}}));
\ No newline at end of file
+define(["require","exports","./RegularEvent"],(function(t,e,r){"use strict";return class extends r{constructor(t,e,r){super(t,e),this.callback=this.throttle(e,r)}throttle(t,e){let r=!1;return function(...s){r||(t.apply(this,s),r=!0,setTimeout(()=>{r=!1,t.apply(this,s)},e))}}}}));
\ No newline at end of file