Настаивайте на постройке колес на второй день - антивибрационные и дроссельные

JavaScript

Преимущества здесь

вооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо по

Кроме того, я могу построить колеса.Ты боишься, что тебя спросят на собеседовании? Стройте колесо в день, и все готово.

Аспект

  • Рукописные вопросы для письменного теста и собеседования
  • Разработка TDD
  • С видео пояснением

программа по сборке колес

(План не может не отставать от изменений, итерации в любое время, добро пожаловать, чтобы оставить сообщение и почувствовать рыбу в любое время)

  • Основы рамки

    Стабилизация и троттлинг

    Anti-shake и throttling можно назвать парой хороших друзей, а также горячими вопросами, написанными от руки на предварительных собеседованиях. Anti-shake и throttling на самом деле избегают частых срабатываний обратных вызовов и вызывают много вычислений, которые влияют на дрожание страницы или даже зависание. Проще говоря, превратите несколько обратных вызовов, таких как клики по страницам или вызовы ajax, в один. Разница между защитой от сотрясений и дросселированием заключается в том, преобладает ли первый или последний раз.

    нужно

    1. Дросселирование — вызов несколько раз, действительным является только первый вызов.

    Через какое-то время, независимо от того, сколько вызовов будет вызвано, преобладает первый. Подсказку о завершении поля ввода необходимо заполнять каждые две секунды.

    представлены тестовыми примерами

    it("节流Throttle", (done) => {
  const { throttle } = require("../index");

  // 定义一个Mock函数
  const mockFn = jest.fn();

  // 封装为节流方法
  const fn = throttle(mockFn, 10);

  // 同步调用两次
  fn(1);
  fn(2);

  setTimeout(() => {
    const calls = mockFn.mock.calls;

    // 断言 mock方法只调用一次
    expect(calls.length).toBe(1);
    // 根据参数判断以第一次调用为准
    expect(calls[0][0]).toBe(1);
    done();
  }, 50);
});

    2. Откажитесь в последний раз

    В течение определенного периода времени, независимо от того, сколько обратных вызовов будет запущено, последний будет преобладать. Например, если взять пользовательское перетаскивание для изменения размера окна и вызвать событие изменения размера в качестве примера, это приведет к изменению макета компонента, и только последний вызов имеет смысл.

    it("防抖Debounce", (done) => {
  const { debounce } = require("../index");
  const mockFn = jest.fn();
  // 封装一个防抖函数
  const fn = debounce(mockFn, 10);

  // 连续两次调用
  fn(1);
  fn(2);

  setTimeout(() => {
    const calls = mockFn.mock.calls;
    // 断言只调用一次
    expect(calls.length).toBe(1);
    // 断言以最后一次调用为准
    expect(calls[0][0]).toBe(2);
    done();
  }, 50);
});

    Реализация функции

    дросселирование

    Основная идея состоит в том, чтобы использовать оценку временной метки, а разница во времени между каждой оценкой вызова и последним вызовом определяет, нужен ли вызов. дроссель на самом деле является фабричной функцией, которая может инкапсулировать функцию как функцию с функцией дросселя.

    module.exports.throttle = (fn, delay) => {
  // 定义上次触发时间
  let last = 0;
  return (...args) => {
    const now = + Date.now();
    console.log("call", now, last, delay);
    if (now > last + delay) {
      last = now;
      fn.apply(this, args);
    }
  };
};

    Стабилизатор

    Реализация может использовать таймер для выполнения функции.При возникновении нового вызова, если старый вызов не выполняется, предыдущий таймер очищается.

    /**
 * 防抖Debounce
 */
module.exports.debounce = (fn, delay) => {
  let timer;
  return (...args) => {
    // 判断定时器是否存在，清除定时器
    if (timer) {
      clearTimeout(timer);
    }

    // 重新调用setTimeout
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
};

    тестовое задание

    ОК задача выполнена

    Обратите внимание на дядю Рана из всего стека и берите с собой делать колеса каждый день (отдыхайте по выходным, отбрасывайте 996)

    В этой статье используетсяmdniceнабор текста

Категории