FIX: Correctly debounce various functions (#18673)

Debouncing inline anonymous functions does not work.

This fixes all instances of that error by extracting the function or using the new `@debounce(delay)` decorator

app/assets/javascripts/admin/addon/controllers/admin-site-settings.js

@@ -2,9 +2,8 @@ import Controller from "@ember/controller";
 import I18n from "I18n";
 import { INPUT_DELAY } from "discourse-common/config/environment";
 import { alias } from "@ember/object/computed";
-import discourseDebounce from "discourse-common/lib/debounce";
 import { isEmpty } from "@ember/utils";
-import { observes } from "discourse-common/utils/decorators";
+import { debounce, observes } from "discourse-common/utils/decorators";
 import { action } from "@ember/object";
 
 export default Controller.extend({
@@ -113,19 +112,14 @@ export default Controller.extend({
   },
 
   @observes("filter", "onlyOverridden", "model")
+  @debounce(INPUT_DELAY)
   filterContent() {
-    discourseDebounce(
-      this,
-      () => {
     if (this._skipBounce) {
       this.set("_skipBounce", false);
     } else {
       this.filterContentNow(this.categoryNameKey);
     }
   },
-      INPUT_DELAY
-    );
-  },
 
   @action
   clearFilter() {

app/assets/javascripts/discourse/app/components/choose-message.js

@@ -1,9 +1,8 @@
 import Component from "@ember/component";
-import discourseDebounce from "discourse-common/lib/debounce";
 import { action, get } from "@ember/object";
 import { isEmpty } from "@ember/utils";
 import { next } from "@ember/runloop";
-import { observes } from "discourse-common/utils/decorators";
+import { debounce, observes } from "discourse-common/utils/decorators";
 import { searchForTerm } from "discourse/lib/search";
 
 export default Component.extend({
@@ -30,12 +29,8 @@ export default Component.extend({
     this.set("loading", false);
   },
 
+  @debounce(300)
   search(title) {
-    discourseDebounce(
-      this,
-      function () {
-        const currentTopicId = this.currentTopicId;
-
     if (isEmpty(title)) {
       this.setProperties({ messages: null, loading: false });
       return;
@@ -46,22 +41,18 @@ export default Component.extend({
       searchForId: true,
       restrictToArchetype: "private_message",
     }).then((results) => {
-          if (results && results.posts && results.posts.length > 0) {
+      if (results?.posts?.length) {
         this.set(
           "messages",
           results.posts
             .mapBy("topic")
-                .filter((t) => t.get("id") !== currentTopicId)
+            .filter((t) => t.get("id") !== this.currentTopicId)
         );
       } else {
         this.setProperties({ messages: null, loading: false });
       }
     });
   },
-      title,
-      300
-    );
-  },
 
   @action
   chooseMessage(message, event) {

app/assets/javascripts/discourse/app/components/copy-button.js

@@ -1,19 +1,32 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
 import discourseDebounce from "discourse-common/lib/debounce";
+import { bind } from "discourse-common/utils/decorators";
 
 export default Component.extend({
   tagName: "",
   copyIcon: "copy",
   copyClass: "btn-primary",
 
+  @bind
+  _restoreButton() {
+    if (this.isDestroying || this.isDestroyed) {
+      return;
+    }
+
+    this.set("copyIcon", "copy");
+    this.set("copyClass", "btn-primary");
+  },
+
   @action
   copy() {
     const target = document.querySelector(this.selector);
     target.select();
     target.setSelectionRange(0, target.value.length);
+
     try {
       document.execCommand("copy");
+
       if (this.copied) {
         this.copied();
       }
@@ -21,13 +34,7 @@ export default Component.extend({
       this.set("copyIcon", "check");
       this.set("copyClass", "btn-primary ok");
 
-      discourseDebounce(() => {
+      discourseDebounce(this._restoreButton, 3000);
-        if (this.isDestroying || this.isDestroyed) {
-          return;
-        }
-        this.set("copyIcon", "copy");
-        this.set("copyClass", "btn-primary");
-      }, 3000);
     } catch (err) {}
   },
 });

app/assets/javascripts/discourse/app/controllers/group-index.js

@@ -1,8 +1,10 @@
 import Controller, { inject as controller } from "@ember/controller";
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
+import discourseComputed, {
+  debounce,
+  observes,
+} from "discourse-common/utils/decorators";
 import { action } from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
-import discourseDebounce from "discourse-common/lib/debounce";
 import { gt } from "@ember/object/computed";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
@@ -23,15 +25,10 @@ export default Controller.extend({
   bulkSelection: null,
 
   @observes("filterInput")
+  @debounce(500)
   _setFilter() {
-    discourseDebounce(
-      this,
-      function () {
     this.set("filter", this.filterInput);
   },
-      500
-    );
-  },
 
   @observes("order", "asc", "filter")
   _filtersChanged() {

app/assets/javascripts/discourse/app/controllers/group-requests.js

@@ -1,7 +1,9 @@
 import Controller, { inject as controller } from "@ember/controller";
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
+import discourseComputed, {
+  debounce,
+  observes,
+} from "discourse-common/utils/decorators";
 import { ajax } from "discourse/lib/ajax";
-import discourseDebounce from "discourse-common/lib/debounce";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
 export default Controller.extend({
@@ -17,15 +19,10 @@ export default Controller.extend({
   loading: false,
 
   @observes("filterInput")
+  @debounce(500)
   _setFilter() {
-    discourseDebounce(
-      this,
-      function () {
     this.set("filter", this.filterInput);
   },
-      500
-    );
-  },
 
   @observes("order", "asc", "filter")
   _filtersChanged() {

app/assets/javascripts/discourse/app/controllers/user-invited-show.js

@@ -2,8 +2,10 @@ import Controller from "@ember/controller";
 import { action } from "@ember/object";
 import { equal, reads } from "@ember/object/computed";
 import { INPUT_DELAY } from "discourse-common/config/environment";
-import discourseDebounce from "discourse-common/lib/debounce";
+import discourseComputed, {
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
+  debounce,
+  observes,
+} from "discourse-common/utils/decorators";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import showModal from "discourse/lib/show-modal";
 import Invite from "discourse/models/invite";
@@ -28,17 +30,12 @@ export default Controller.extend({
   },
 
   @observes("searchTerm")
+  @debounce(INPUT_DELAY)
   _searchTermChanged() {
-    discourseDebounce(
-      this,
-      function () {
     Invite.findInvitedBy(this.user, this.filter, this.searchTerm).then(
       (invites) => this.set("model", invites)
     );
   },
-      INPUT_DELAY
-    );
-  },
 
   inviteRedeemed: equal("filter", "redeemed"),
   inviteExpired: equal("filter", "expired"),

app/assets/javascripts/discourse/app/lib/category-tag-search.js

@@ -19,18 +19,7 @@ function updateCache(term, results) {
   return results;
 }
 
-function searchTags(term, categories, limit) {
+function searchFunc(q, limit, cats, resultFunc) {
-  return new Promise((resolve) => {
-    let clearPromise = isTesting()
-      ? null
-      : discourseLater(() => {
-          resolve(CANCELLED_STATUS);
-        }, 5000);
-
-    const debouncedSearch = (q, cats, resultFunc) => {
-      discourseDebounce(
-        this,
-        function () {
   oldSearch = ajax("/tags/filter/search", {
     data: { limit, q },
   });
@@ -54,18 +43,28 @@ function searchTags(term, categories, limit) {
       oldSearch = null;
       resultFunc(returnVal);
     });
-        },
+}
-        q,
-        cats,
-        resultFunc,
-        300
-      );
-    };
 
-    debouncedSearch(term, categories, (result) => {
+function searchTags(term, categories, limit) {
+  return new Promise((resolve) => {
+    let clearPromise = isTesting()
+      ? null
+      : discourseLater(() => {
+          resolve(CANCELLED_STATUS);
+        }, 5000);
+
+    discourseDebounce(
+      this,
+      searchFunc,
+      term,
+      limit,
+      categories,
+      (result) => {
         cancel(clearPromise);
         resolve(updateCache(term, result));
-    });
+      },
+      300
+    );
   });
 }
 

app/assets/javascripts/discourse/app/lib/safari-hacks.js

@@ -131,10 +131,7 @@ function positioningWorkaround(fixedElement) {
     }
   }
 
-  const checkForInputs = function () {
+  function checkForInputs() {
-    discourseDebounce(
-      this,
-      function () {
     attachTouchStart(fixedElement, lastTouched);
 
     fixedElement
@@ -142,17 +139,18 @@ function positioningWorkaround(fixedElement) {
       .forEach((el) => {
         attachTouchStart(el, positioningHack);
       });
-      },
+  }
-      100
+
-    );
+  function debouncedCheckForInputs() {
-  };
+    discourseDebounce(checkForInputs, 100);
+  }
 
   positioningWorkaround.touchstartEvent = function (element) {
     let triggerHack = positioningHack.bind(element);
     triggerHack();
   };
 
-  const observer = new MutationObserver(checkForInputs);
+  const observer = new MutationObserver(debouncedCheckForInputs);
   observer.observe(fixedElement, {
     childList: true,
     subtree: true,

app/assets/javascripts/discourse/app/mixins/docking.js

@@ -2,34 +2,15 @@ import Mixin from "@ember/object/mixin";
 import discourseDebounce from "discourse-common/lib/debounce";
 import { cancel } from "@ember/runloop";
 import discourseLater from "discourse-common/lib/later";
-import { isTesting } from "discourse-common/config/environment";
+import { bind } from "discourse-common/utils/decorators";
 
-const INITIAL_DELAY_MS = isTesting() ? 0 : 50;
+const INITIAL_DELAY_MS = 50;
-const DEBOUNCE_MS = isTesting() ? 0 : 5;
+const DEBOUNCE_MS = 5;
 
 export default Mixin.create({
-  queueDockCheck: null,
   _initialTimer: null,
   _queuedTimer: null,
 
-  init() {
-    this._super(...arguments);
-    this.queueDockCheck = () => {
-      this._queuedTimer = discourseDebounce(
-        this,
-        this.safeDockCheck,
-        DEBOUNCE_MS
-      );
-    };
-  },
-
-  safeDockCheck() {
-    if (this.isDestroyed || this.isDestroying) {
-      return;
-    }
-    this.dockCheck();
-  },
-
   didInsertElement() {
     this._super(...arguments);
 
@@ -57,4 +38,21 @@ export default Mixin.create({
     window.removeEventListener("scroll", this.queueDockCheck);
     document.removeEventListener("touchmove", this.queueDockCheck);
   },
+
+  @bind
+  queueDockCheck() {
+    this._queuedTimer = discourseDebounce(
+      this,
+      this.safeDockCheck,
+      DEBOUNCE_MS
+    );
+  },
+
+  @bind
+  safeDockCheck() {
+    if (this.isDestroyed || this.isDestroying) {
+      return;
+    }
+    this.dockCheck();
+  },
 });

app/assets/javascripts/discourse/app/mixins/mobile-scroll-direction.js

@@ -48,16 +48,14 @@ export default Mixin.create({
     // If the user reaches the very bottom of the topic, we only want to reset
     // this scroll direction after a second scroll down. This is a nicer event
     // similar to what Safari and Chrome do.
-    discourseDebounce(
+    discourseDebounce(this, this._setBottomHit, 1000);
-      this,
-      function () {
-        this._bottomHit = 1;
-      },
-      1000
-    );
 
     if (this._bottomHit === 1) {
       this.set("mobileScrollDirection", null);
     }
   },
+
+  _setBottomHit() {
+    this._bottomHit = 1;
+  },
 });

plugins/discourse-local-dates/assets/javascripts/discourse/components/discourse-local-dates-create-form.js

@@ -1,12 +1,14 @@
 /* global Pikaday:true */
-import computed, { observes } from "discourse-common/utils/decorators";
+import computed, {
+  debounce,
+  observes,
+} from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 import EmberObject, { action } from "@ember/object";
 import I18n from "I18n";
 import { INPUT_DELAY } from "discourse-common/config/environment";
 import { Promise } from "rsvp";
 import { cookAsync } from "discourse/lib/text";
-import discourseDebounce from "discourse-common/lib/debounce";
 import { isEmpty } from "@ember/utils";
 import loadScript from "discourse/lib/load-script";
 import { notEmpty } from "@ember/object/computed";
@@ -59,26 +61,20 @@ export default Component.extend({
   },
 
   @observes("computedConfig.{from,to,options}", "options", "isValid", "isRange")
-  _renderPreview() {
+  @debounce(INPUT_DELAY)
-    discourseDebounce(
+  async _renderPreview() {
-      this,
+    if (this.markup) {
-      function () {
+      const result = await cookAsync(this.markup);
-        const markup = this.markup;
-        if (markup) {
-          cookAsync(markup).then((result) => {
       this.set("currentPreview", result);
+
       schedule("afterRender", () => {
         applyLocalDates(
           document.querySelectorAll(".preview .discourse-local-date"),
           this.siteSettings
         );
       });
-          });
     }
   },
-      INPUT_DELAY
-    );
-  },
 
   @computed("date", "toDate", "toTime")
   isRange(date, toDate, toTime) {

plugins/discourse-narrative-bot/assets/javascripts/initializers/new-user-narrative.js

@@ -1,5 +1,5 @@
+import { debounce } from "discourse-common/utils/decorators";
 import { ajax } from "discourse/lib/ajax";
-import discourseDebounce from "discourse-common/lib/debounce";
 import { headerOffset } from "discourse/lib/offset-calculator";
 import isElementInViewport from "discourse/lib/is-element-in-viewport";
 import { withPluginApi } from "discourse/lib/plugin-api";
@@ -74,10 +74,8 @@ function initialize(api) {
       // No need to unsubscribe, core unsubscribes /topic/* routes
     },
 
+    @debounce(500)
     _scrollToDiscobotPost(postNumber) {
-      discourseDebounce(
-        this,
-        function () {
       const post = document.querySelector(
         `.topic-post article#post_${postNumber}`
       );
@@ -93,10 +91,6 @@ function initialize(api) {
         behavior: "smooth",
       });
     },
-        postNumber,
-        500
-      );
-    },
   });
 
   api.attachWidgetAction("header", "headerSearchContextTrigger", function () {