文件从头开始读函数

was named one of the !

被评为 ！

A function decorator is a higher-order function that takes one function as an argument and returns another function, and the returned function is a variation of the argument function —

函数装饰器是一个高阶函数，它将一个函数作为参数并返回另一个函数，返回的函数是参数函数的变体—

Let’s write some common function decorators found in libraries like , or .

让我们写一些在 ， 或类的库中找到的常用函数修饰符。

一旦() (once())

• : creates a version of the function that executes only once. It’s useful for an initialization function, where we want to make sure it runs only once, no matter how many times it is called from different places.

  ：创建仅执行一次的函数版本。 这对于初始化函数很有用，因为我们希望确保它只运行一次，而不管它在不同位置被调用了多少次。

function once(fn){  let returnValue;  let canRun = true;  return function runOnce(){      if(canRun) {          returnValue = fn.apply(this, arguments);          canRun = false;      }      return returnValue;  }}var processonce = once(process);processonce(); //processprocessonce(); //

once() is a function that returns another function. The returned function runOnce() is a . It’s also important to note how the original function was called — by passing in the current value of this and all the arguments : fn.apply(this, arguments) .

once()是一个返回另一个函数的函数。 返回的函数runOnce()是一个 。 同样重要的是要注意原始函数是如何调用的—通过传入this和所有arguments的当前值： fn.apply(this, arguments) 。

If you want to understand closures better, take a look at .

如果您想更好地理解闭包，请查看 。

后() (after())

• : creates a version of the function that executes only after a number of calls. It’s useful, for example, when we want to make sure the function runs only after all the asynchronous tasks have finished.

  ：创建仅在多次调用后才执行的函数版本。 例如，当我们要确保该功能仅在所有异步任务完成后才运行时，此功能很有用。

function after(count, fn){   let runCount = 0;   return function runAfter(){      runCount = runCount + 1;      if (runCount >= count) {         return fn.apply(this, arguments);              }   }}function logResult() { console.log("calls have finished"); }let logResultAfter2Calls = after(2, logResult);setTimeout(function logFirstCall() {       console.log("1st call has finished");       logResultAfter2Calls(); }, 3000);setTimeout(function logSecondCall() {       console.log("2nd call has finished");       logResultAfter2Calls(); }, 4000);

Note how I’m using after() to build a new function logResultAfter2Calls() that will execute the original code of logResult() only after the second call.

注意我如何使用after()建立一个新的功能logResultAfter2Calls()将执行的原代码logResult()第二个电话后只。

风门() (throttle())

• : creates a version of the function that, when invoked repeatedly, will call the original function once per every wait milliseconds. It’s useful for limiting events that occur faster.

  ：创建函数的版本，当反复调用该函数时，将每wait毫秒调用一次原始函数。 这对于限制更快发生的事件很有用。

function throttle(fn, interval) {    let lastTime;    return function throttled() {        let timeSinceLastExecution = Date.now() - lastTime;        if(!lastTime || (timeSinceLastExecution >= interval)) {            fn.apply(this, arguments);            lastTime = Date.now();        }    };}let throttledProcess = throttle(process, 1000);$(window).mousemove(throttledProcess);

In this example, moving the mouse will generate a lot of mousemove events, but the call of the original function process() will just happen once per second.

在此示例中，移动鼠标将生成许多mousemove事件，但是原始函数process()的调用仅每秒发生一次。

was named one of the !

被称为 ！

For more on applying functional programming techniques in React take a look at .

有关在React中应用函数式编程技术的更多信息，请查看 。

Learn functional React, in a project-based way, with .

通过 ，以基于项目的方式学习功能性React 。

翻译自:

文件从头开始读函数