Analysis of core-decorators source --debounce

@debounce

Anti-shake function: When you call the function n seconds, the action will be performed once and re-calculate the execution time ago that if n seconds in turn calls the function will be canceled.

Use Case

import { debounce } from 'core-decorators';

class  {

  content = '';

  @debounce(500)
  updateContent(content) {
    this.content = content;
  }

  bindEvent() {
    document.getElementById('editor').oninput = e => {
      this.updateContent(e.target.value)
    }
  }
}

1	<textarea id="editor"></textarea>

For example, when listening id is editor editor input, each entry will trigger oninputan event, call the this.updateContentmethod. In order to prevent frequent content updates, can updateContentdecorative debounce method, not to update during the input this.content, the input is completed until 500 msec, again a one-time content updates content.

Source

import { metaFor } from './private/utils';

const DEFAULT_TIMEOUT = 300;

function handleDescriptor(target, key, descriptor, [wait = DEFAULT_TIMEOUT, immediate = false]) {
  const callback = descriptor.value;

  if (typeof callback !== 'function') {
    throw new SyntaxError('Only functions can be debounced');
  }

  return { 
    ... descriptor, 
    value () { const {} = debounceTimeoutIds metaFor ( the this ); // conventional image stabilization function call const timeout = debounceTimeoutIds [Key]; // no immediate timeout is true and the current subject matter, when the times call only when the first call to perform const CALLNOW load immediate && = timeout;! const args = arguments the ;
      
      
      
      
      
      
      

      clearTimeout (timeout); previous image stabilization function // always covered, the last execution of the callback function passed       debounceTimeoutIds [Key] = the setTimeout ( () => { Delete debounceTimeoutIds [Key]; IF (immediate) {!           callback .apply ( the this , args);         }       }, the wait);
      

        
        




      IF (CALLNOW) { // wait before performing
         callback.apply ( the this , args); 
      } 
    } 
  }; 
}

Call parameters

Support incoming call when the wait and options.immediate two parameters:

wait: time awaiting execution unit ms, default value 300
{Immediate}: whether to perform the binding function, the default value is false, waiting time before execution wait; performed first parameter passed to true

Meta Object

1
2
3

const {} = debounceTimeoutIds metaFor ( the this ); 
// this time is initialized only debounceTimeoutIds Oh, because with the lazyInitialize 
Console .log (metaFor ( the this ))

metaForA method to increase the current instance Symbol('__core_decorators__')attribute, a value Meta object.
Meta type as shown below, including attributes used debounce and throttle:

class Meta {
  @lazyInitialize
  debounceTimeoutIds = {};

  @lazyInitialize
  throttleTimeoutIds = {};

  @lazyInitialize
  throttlePreviousTimestamps = {};

  @lazyInitialize
  throttleTrailingArgs = null;

  @lazyInitialize
  profileLastRan = null;
}

使用了@lazyInitialize标记，可以使得每次只初始化被用到的属性，像debounce的时候只用到debounceTimeoutIds属性。console输出Meta对象，结构如图所示，可以看到只初始化了debounceTimeoutIds属性：

debounceTimeout存储

When the call is @debounceduring the method of labeling:
.. 1 the setTimeout delays execution of the function, the object returns a timeout;
2 timeout object returned will be stored in. debounceTimeoutIds[key](In updateContentthe method as an example, debounceTimeoutIds[key]Key value is here updateContent);
3 repeat the call. this method will be re-created timeout object before and cover debounceTimeoutIds[key](where each call updateContentwill be to re- debounceTimeoutIds['updateContent']assignment);

setTimeout(() => {
    delete debounceTimeoutIds[key];
    if (!immediate) {
      callback.apply(this, args);
    }
  }, wait);

Implementation of the results is this: every time again wait wait, go perform the callback method, callback method that is key corresponding to the value of .

Original: Large column core-decorators Source Analysis of --debounce