gzwgq222/notes

:notebook_with_decorative_cover: note

notes's Issues

div水平垂直居中

<div class="parent">
  <div class="child"></div>
</div>

1

  .parent {
    display: flex;
    align-items: center;
    justify-content: center;
  }

2

  .parent {
    display: flex;
  }
  .child {
    margin: auto;
  }

3

  .parent {
    display: grid;
  }
  .child {
    justify-self: center;
    align-self: center;
  }

4

  .parent {
    position: relative;
  }
  /* 宽高未定 */
  .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  /*  定宽高 */
  .child {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
  }
  /* 或 */
  .child {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }

防抖和节流

防抖：动作绑定事件，动作发生后一定时间后触发事件，在这段时间内，如果该动作又发生，则重新等待一定时间再触发事件。

  function debounce(func, time) {
    let timer = null;
    return () => {
      clearTimeout(timer);
      timer = setTimeout(()=> {
        func.apply(this, arguments)
      }, time);
    }
  }

节流： 动作绑定事件，动作发生后一段时间后触发事件，在这段时间内，如果动作又发生，则无视该动作，直到事件执行完后，才能重新触发。

  function throtte(func, time){
    let activeTime = 0;
    return () => {
      const current = Date.now();
      if(current - activeTime > time) {
        func.apply(this, arguments);
        activeTime = Date.now();
      }
    }
  }