“This is the NTH day of my participation in the November Gwen Challenge. See details: The Last Gwen Challenge 2021”.

preface

Hello, I’m Cat on wheels. This series of articles will take you five minutes a day using TDD to complete a written test and a written interview.

  1. Image stabilization
  2. The throttle
  3. Call, apply, bind
  4. EventEmitter
  5. Implement ES5 inheritance manually
  6. Implement Instanceof manually
  7. Object.create
  8. new
  9. Shallow copy and deep copy
  10. The singleton pattern
  11. Implement JSONP manually
  12. Arrays are de-weighted, flattened, and maximally valued
  13. Array out of order – shuffle algorithm
  14. The function is currified
  15. Analog implementation promise
  16. Promise based Ajax encapsulation
  17. Asynchronous loop printing
  18. Lazy loading of images

demand

Before the realization of anti – shake, let’s first understand the definition of anti – shake. Anti-shake means that no matter how frequently the event is triggered, a certain event is triggered n seconds before execution. If you fire an event within n seconds of it firing, the new event will take n seconds to execute and cancel the previous event.

Now let’s break down the requirements:

  1. The function is executed n seconds after firing, which is delayed execution of the function
  2. The function is fired consecutively in n seconds, and all functions that were fired and waited before are cancelled. The function is delayed by the trigger event time again.

implementation

Now let’s do it step by step.

Demand for 1

First, let’s implement the test code for the delayed execution function

// debounce.test.js
test('should dealy function'.function(done) {
  const mockFn = jest.fn();
  const debouncedFn = debounce(mockFn, 10);
  
  debouncedFn();
  expect(mockFn.toBeCalledTimes(0);
         
  setTimeout(function() {
    expect(mockFn).toBeCalledTimes(1);
    
    done();
  }, 20);
})
Copy the code

Run the test code

​

Implement test code

// debounce.js
function debounce(fn, n) {
  return function () {
    setTimeout(function () {
      fn();
    }, n);
  };
}

Copy the code

Next, we continue to run the test code, OK

Demand for 2

Now, let’s implement requirement 2 after disassembly. The test code is as follows

// debounce.test.js
test('should debounce function'.function() {
  const mockFn = jest.fn()
  const debouncedFn = debounce(mockFn, 10);
  
  debouncedFn()
  debouncedFn() 

  expect(mockFn).toBeCalledTimes(0);
  
  
  setTimeout(function () {
      expect(mockFn).toBeCalledTimes(1);

      done();
  }, 20);
})
Copy the code

implementation

// debounce.js
function debounce(fn, n) {
  let prev = 0
  let id
  
  return function (. args) {
    // 1. If the time of the function call is within n seconds: the time when the function was called - the time when the timer was set last time
    const now = Datw.now()
    if (id && now - prev <= n)  {
      // 2. Cancel the function call
      clearTimeout(id)
    }      
   
    // 3. Execute n seconds later based on the new call event
    prev = Date.now()
    
    id = setTimeout(function () { fn(... args); }, n); }; }Copy the code

​

Finally, run the test code

So, the most basic anti-shake function has been successfully implemented. Wrap up! ~