feat: 2019-11-25 - 写一个debounce的装饰器 (azl397985856#69)

azl397985856 · web-flow · commit 8852db43312d · 2019-11-26T11:20:11.000+08:00
2019-11-25 - &#20889;&#19968;&#20010;debounce&#30340;&#35013;&#39280;&#22120;
diff --git a/docs/daily/2019-11-25.md b/docs/daily/2019-11-25.md
@@ -0,0 +1,94 @@
+# &#27599;&#26085;&#19968;&#39064; - 2019-11-25 - &#20889;&#19968;&#20010;debounce&#30340;&#35013;&#39280;&#22120;
+
+### &#20449;&#24687;&#21345;&#29255;
+
+- &#26102;&#38388;&#65306;2019-11-25
+- tag&#65306;`&#32534;&#31243;&#39064;`
+
+### &#38382;&#39064;&#25551;&#36848;
+&#23454;&#29616;&#19968;&#20010;debounce&#35013;&#39280;&#22120;
+
+### &#21442;&#32771;&#23454;&#29616;
+
+##### &#20195;&#30721;&#23454;&#29616;
+```typescript
+/**
+ * &#35013;&#39280;&#22120;&#30340;debounce
+ * @param delay
+ */
+export function debounce(delay: number): Function {
+  return (
+    target: Function,
+    propertyKey: string,
+    propertyDesciptor: PropertyDescriptor
+  ) => {
+    const method = propertyDesciptor.value;
+    let timer = null;
+    propertyDesciptor.value = (...args) => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+      timer = setTimeout(() => method(...args), delay);
+    };
+    return propertyDesciptor;
+  };
+}
+```
+
+##### &#21333;&#20803;&#27979;&#35797;
+
+``` typescript
+import { debounce } from './index';
+
+jest.useFakeTimers();
+
+let a: any;
+let mockFunc: jest.Mock;
+beforeEach(() => {
+  mockFunc = jest.fn();
+  class Test {
+    @debounce(1000)
+    sayHi() {
+      mockFunc();
+    }
+  }
+  a = new Test();
+});
+
+describe('debounce:', () => {
+  test('debounced function should be called after the delay time', () => {
+    a.sayHi();
+    expect(mockFunc).toHaveBeenCalledTimes(0);
+    jest.advanceTimersByTime(1000);
+    expect(mockFunc).toHaveBeenCalledTimes(1);
+  });
+
+  test('debounced function should not be called before the delay time', () => {
+    a.sayHi();
+    expect(mockFunc).toHaveBeenCalledTimes(0);
+    let count = 100;
+    while (count--) {
+      a.sayHi();
+    }
+    expect(mockFunc).toHaveBeenCalledTimes(0);
+
+    count = 100;
+    while (count--) {
+      jest.advanceTimersByTime(999);
+      a.sayHi();
+    }
+    expect(mockFunc).toHaveBeenCalledTimes(0);
+  });
+});
+```
+
+&#25191;&#34892;&#32467;&#26524;
+![](assets/2019-11-25&#32;-&#32;&#20889;&#19968;&#20010;debounce&#30340;&#35013;&#39280;&#22120;-unit-test.png)
+
+
+### &#25193;&#23637;
+
+- &#20889;&#19968;&#20010;throttle&#30340;&#35013;&#39280;&#22120;
+
+
diff --git a/docs/daily/README.md b/docs/daily/README.md
@@ -25,6 +25,12 @@
 
 ### &#21382;&#21490;&#27719;&#24635;
 
+#### [&#20889;&#19968;&#20010;debounce&#30340;&#35013;&#39280;&#22120;](./2019-11-25.md)
+
+tag: `&#32534;&#31243;&#39064;`
+
+&#26102;&#38388;: 2019-11-25
+
 #### [&#20197;&#19979;&#20851;&#20110;Javascript&#25191;&#34892;&#24341;&#25806;&#25551;&#36848;&#27491;&#30830;&#30340;&#26159;](./2019-09-24.md)
 
 tag&#65306;`&#38463;&#37324;&#21069;&#31471;&#26657;&#25307;&#31508;&#35797;`
diff --git a/docs/daily/assets/2019-11-25 - &#20889;&#19968;&#20010;debounce&#30340;&#35013;&#39280;&#22120;-unit-test.png b/docs/daily/assets/2019-11-25 - &#20889;&#19968;&#20010;debounce&#30340;&#35013;&#39280;&#22120;-unit-test.png

-Original file line number
+Diff line change
 ### 历史汇总
 +#### [写一个debounce的装饰器](./2019-11-25.md)
++
 +tag: `编程题`
++
 +时间: 2019-11-25
++
 #### [以下关于Javascript执行引擎描述正确的是](./2019-09-24.md)
 tag：`阿里前端校招笔试`