Trigger Alert on Change Event Only Once If Called Multiple Times In A Few Seconds

Question

I have an alert that needs to be displayed to the user conditionally after they change their input. The problem I'm coming across is the alert fire rapidly multiple times in a row after they key down quickly. I want the alert to fire only once every few seconds. How can I achieve this?

childElem.on('change', function () {
      let currentHeightPaste2k
      let scrnwidth
      setTimeout(function () {
        let actualHeightPaste2k = parseInt($('#' + currenId2c).height()) //Height of DIV
        scrnwidth = $(window).width()
        if (scrnwidth == parseInt(1226)) {
          currentHeightPaste2k = $('#' + currenId2c).get(0).scrollHeight //Content Height of DIV
        } else {
          currentHeightPaste2k = $('#' + currenId2c).get(0).scrollHeight - 1 //Content Height of DIV
        }
        if (actualHeightPaste2k < currentHeightPaste2k) {
          _.throttle(fireError, 300)
          CKEDITOR.instances[currenId2c].execCommand('undo')
        }
      }, 100)
    })

function fireError() {
      toast.fire({
        type: 'error',
        title: 'Typing Limit Exceeded',
        text: 'You have inserted more text than the space will allow.',
        showConfirmButton: false,
        confirmButtonClass: 'cancel-btn-class',
      })
    }

Answer 1

I think you're creating a new throttled function every time the callback is called. You should try to create the throttled function in a higher scope and use the function returned from _.throttle in the callback.

See https://underscorejs.org/#throttle

Answer 2

_.throttle does not call the function that you pass to it. Instead, it returns a new function . You need to store the new function and call it instead of the old function. The new function ensures that the old function is invoked no more often than the interval that you passed to _.throttle . The following code will do what you were trying to achieve (at least as far as throttling is concerned):

const fireError = _.throtte(function() {
  toast.fire({
    type: 'error',
    title: 'Typing Limit Exceeded',
    text: 'You have inserted more text than the space will allow.',
    showConfirmButton: false,
    confirmButtonClass: 'cancel-btn-class',
  });
}, 300);

childElem.on('change', function() {
  let currentHeightPaste2k;
  let scrnwidth;
  setTimeout(function() {
    let actualHeightPaste2k = parseInt($('#' + currenId2c).height()); //Height of DIV
    scrnwidth = $(window).width();
    if (scrnwidth == 1226) {
      currentHeightPaste2k = $('#' + currenId2c).get(0).scrollHeight; //Content Height of DIV
    } else {
      currentHeightPaste2k = $('#' + currenId2c).get(0).scrollHeight - 1; //Content Height of DIV
    }
    if (actualHeightPaste2k < currentHeightPaste2k) {
      fireError();
      CKEDITOR.instances[currenId2c].execCommand('undo');
    }
  }, 100);
});