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

2019-11-25 - 写一个debounce的装饰器

docs/daily/2019-11-25.md

@@ -0,0 +1,94 @@
+# 每日一题 - 2019-11-25 - 写一个debounce的装饰器
+
+### 信息卡片
+
+- 时间：2019-11-25
+- tag：`编程题`
+
+### 问题描述
+实现一个debounce装饰器
+
+### 参考实现
+
+##### 代码实现
+```typescript
+/**
+ * 装饰器的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;
+ };
+}
+```
+
+##### 单元测试
+
+``` 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);
+ });
+});
+```
+
+执行结果
+![](assets/2019-11-25 - 写一个debounce的装饰器-unit-test.png)
+
+
+### 扩展
+
+- 写一个throttle的装饰器
+
+

docs/daily/README.md

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