前端基础知识篇-面试题_$refs children htmlcollection为空-CSDN博客

本文链接：https://blog.csdn.net/weixin_43602502/article/details/125890754

1. 请说明 Ajax Fetch Axios 三者的区别

三者都用于网络请求，但是不同维度

Ajax（Asynchronous Javascript and XML）：一种技术统称
Fetch：一个原生API （浏览器原生 API，用于网络请求; 和 XMLHttpRequest 一个级别; Fetch 语法更加简洁、易用，支持 Promise）
Axios：一个 第三方库 最常用的网络请求 lib（随着 Vue 火爆起来）；内部可用 XMLHttpRequest 和 Fetch 来实现

用 XMLHttpRequest 实现 Ajax

  /**
   * @description: 用 XMLHttpRequest 实现 Ajax
   * @param {*} url 接口地址
   * @param {*} successFn 回调函数
   * @return {*}
   */
  function ajax(url, successFn) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, false);
    xhr.onreadystatechange = function () {
      // 这里的函数异步执行
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          successFn(xhr.responseText);
        }
      }
    };
    xhr.send(null);
  }

2. 节流和防抖（两者有什么区别，分别用于什么场景？）

## 防抖

防抖，防止抖动 “你先抖动着，啥时候停了，再执行下一步”
例如，一个搜索输入框，等输入停止之后，再触发搜索

  /**
   * @description: 防抖函数
   * @param {*} fn 回调函数
   * @param {*} delay 延迟时间ms
   * @return {*}
   */
  function debounce(fn, delay = 200) {
    let timer = 0;
    return function () {
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, arguments); // 透传 this 和参数
        timer = 0;
      }, delay);
    };
  }

在这里插入图片描述

节流，节省交互沟通。流，不一定指流量。
“别急，一个一个来，按时间节奏来，插队者无效”
例如，drag 或 scroll 期间触发某个回调，要设置一个时间间隔

 /**
   * @description: 节流函数
   * @param {*} fn 回调函数
   * @param {*} delay 延迟时间ms
   * @return {*}
   */
  function throttle(fn, delay = 200) {
    let timer = 0;
    return function () {
      if (timer) return;
      timer = setTimeout(() => {
        fn.apply(this, arguments); // 透传 this 和参数
        timer = 0;
      }, delay);
    };
  }