Вызвать и вернуть функцию

Question

Есть ли способ сделать это в JS

function namedFunction(elements,args) {
  const domElements = document.querySelector(elements); 
  const initialValue = 0;
  let incrementBy = 5; 

  return function() {
    // Do something to domElements based on initialValue and incrementBy
    // function needs to run the first time namedFunction is called
    // and this is the only function that needs to run on subsequent calls to namedFunction
   }.call(null)
   // the .call does not work as intended here, but this is basically what I want to do.
}

Я думаю, что могу сделать namedFunction () () с кодом выше для вызова обоих, но мне интересно, есть ли другой способ.

Более длинная версия функции будет выглядеть так:

function namedFunction(elements,args) {
  const domElements = document.querySelector(elements); 
  const initialValue = 0;
  let incrementBy = 5; 

  function namedFunctionEventHandler() {
    // Do something to domElements based on initialValue and incrementBy
    // function needs to run the first time namedFunction is called
    // and this is the only function that needs to run on subsequent calls to namedFunction
  }

  namedFunctionEventHandler(); 
  return namedFunctionEventHandler; 
}

Цель состоит в том, чтобы передать одну функцию в качестве обработчика событий, чтобы при первом запуске она выполняла начальные вычисления, кэшировала элементы dom и более тяжелые вещи, а затем выполняла логику, которая абстрагируется в возвращаемой функции, и При последующих вызовах он использует данные из замыкания.

Редактировать: namedFunction не нужно принимать никаких аргументов, он только для демонстрационных целей.

document.addEventListener('scroll', namedFunction)

это то, что я хочу делать.

@ CertainPerformance - Извините, я неправильно прочитал ваш ответ. Если вы посмотрите на конечный результат, которого я хотел бы достичь, ваше предложение на самом деле не будет работать так, как задумано, как если бы я передавал вызываемую функцию в качестве обработчика события, она будет запущена до того, как событие действительно произошло.

Answer 1

Вы можете воспользоваться тем, что функции в JavaScript являются первоклассными объектами, и сохранить состояние функции (инициализировано / неинициализировано) в свойстве функции.

Данные, вычисленные во время инициализации, также могут быть сохранены в свойствах функции, пожалуйста, посмотрите демонстрационную версию:

const namedFunction = function(elements,args) {
  if (!namedFunction.isInitialized) {
      console.log('Initialization: Computing initial value...');
      namedFunction.initialValue = 10 * 10;
      console.log(`Initial value: ${namedFunction.initialValue}`);
      namedFunction.isInitialized = true;
  }
  return function() {
      console.log('Running regular operation:');
      console.log(`Current value: ${--namedFunction.initialValue}`);
  }.call(null)
}

document.getElementById('demo').addEventListener('click', namedFunction);

<button id="demo">Run</button>

Answer 2

Вы можете сделать namedFunction в IIFE, который сохраняет ссылку на функцию (изначально неопределенная). При вызове, если эта переменная не определена, выполните дорогостоящие вычисления и затем назначьте переменную; если переменная определена , просто вызовите ее.

const handler = (() => {
  let cheapFn;
  return () => {
    if (cheapFn) {
      cheapFn();
      return;
    }
    // expensive calculations here
    const domElements = document.querySelector(elements); 
    ...
    cheapFn = () => {
      // assign to cheapFn
    };
    cheapFn();
  };
})();

Демо-версия:

const handler = (() => {
  let cheapFn;
  return () => {
    if (cheapFn) {
      cheapFn();
      return;
    }
    // expensive calculations here
    console.log('expensive');
    cheapFn = () => {
      console.log('cheap');
    };
    cheapFn();
  };
})();
document.addEventListener('scroll', handler);

body {
  height: 400px;
}

body