91. 面试官：遇到一个页面有多个请求时，如何高效的获取数据并渲染页面

91期

1. 遇到一个页面有多个请求时，如何高效的获取数据并渲染页面

2. 跨域时，如何处理cookie？

3. 如何控制input输入框只能输入数字？

上面问题的答案会在第二天的公众号(程序员每日三问)推文中公布

90期问题及答案

1. 你能手写一个forEach函数吗？

以下是一个完整实现的 forEach 函数，包括参数的验证和更多的错误处理：

function customForEach(array, callback) {
  // 验证参数
  if (!Array.isArray(array)) {
    throw new TypeError('The first argument must be an array.');
  }
  if (typeof callback !== 'function') {
    throw new TypeError('The second argument must be a function.');
  }

  for (let i = 0; i < array.length; i++) {
    if (i in array) { // 忽略稀疏数组中的空洞
      callback(array[i], i, array);
    }
  }
}

// 示例用法
const numbers = [1, 2, 3, 4, 5];

customForEach(numbers, (item, index, arr) => {
  console.log(`Item at index ${index} is ${item}`);
});

这个实现增加了对参数的验证，确保第一个参数是一个数组，第二个参数是一个函数。它还使用 i in array 来检查稀疏数组中的空洞，以确保不会调用回调函数来处理未定义的值。

2. 如何解决a标点击后hover事件失效的问题?

在某些情况下，当 标签（超链接）被点击后，可能会导致它的 hover 伪类失效。这是因为浏览器在点击后会将链接的状态改变，但鼠标已经按下，所以不再触发 hover。

有几种方法可以解决这个问题：

1. 改变伪类的顺序：通常，将 :hover 伪类放在 :active（激活）伪类之后可以解决这个问题，因为这样在点击后 :hover 仍然有效。

   /* 正确的顺序 */
   a:link {
     /* 未访问链接样式 */
   }
   
   a:visited {
     /* 已访问链接样式 */
   }
   
   a:hover {
     /* 鼠标悬停样式 */
   }
   
   a:active {
     /* 激活链接样式 */
   }

2. 使用 JavaScript：你可以使用 JavaScript 来为链接添加点击事件处理程序，以确保点击后的样式是你期望的。以下是一个简单的示例：

   const links = document.querySelectorAll('a');
   
   links.forEach(link => {
     link.addEventListener('click', () => {
       // 添加或移除自定义类来设置样式
       link.classList.toggle('active-link');
     });
   });

   然后，你可以使用 CSS 来定义 .active-link 类的样式。

3. 使用 touchstart 事件（移动设备上的触摸事件）：如果你主要在移动设备上遇到此问题，可以使用 touchstart 事件来触发悬停效果。这种方法需要更多的 JavaScript 处理。

   const links = document.querySelectorAll('a');
   
   links.forEach(link => {
     link.addEventListener('touchstart', () => {
       // 添加或移除自定义类来设置样式
       link.classList.toggle('active-link');
     });
   });

无论你选择哪种方法，都可以解决 标签点击后 hover 事件失效的问题，并确保链接的样式在用户交互时仍然如预期一样。

3. css动画和js动画区别是什么？

CSS 动画和 JavaScript 动画都用于创建网页上的动态效果，但它们有一些区别，这些区别在选择使用哪种方法时应该考虑。

CSS 动画：

1. 声明性：CSS 动画是声明性的，你可以使用简单的 CSS 规则来定义动画的属性、持续时间、延迟等。这种声明性的方式使得创建基本动画变得非常容易。

2. 性能：CSS 动画通常比 JavaScript 动画性能更好，因为浏览器可以对其进行优化。浏览器会使用硬件加速来执行 CSS 动画，从而获得更流畅的效果。

3. 有限性：CSS 动画适用于一些简单的动画，如渐变、旋转、缩放等。但对于更复杂的动画，它们的能力有限。

4. 交互性：CSS 动画通常是静态的，难以根据用户交互来调整动画。例如，在点击按钮后改变动画速度或方向可能需要 JavaScript 的帮助。

JavaScript 动画：

1. 编程性：JavaScript 动画是编程性的，你可以使用 JavaScript 编写自定义的动画逻辑。这意味着你可以创建更复杂、交互性更强的动画。

2. 灵活性：JavaScript 动画可以处理复杂的场景，如根据用户输入或特定条件来触发动画。你可以更灵活地控制动画的各个方面。

3. 性能：虽然 JavaScript 动画在某些情况下性能较差，但它们可以用于解决复杂的动画需求，而 CSS 动画可能无法胜任。

4. 学习曲线：JavaScript 动画通常需要更多的代码和学习成本，因为你需要编写动画的逻辑。

总结：选择使用 CSS 动画还是 JavaScript 动画取决于你的需求。如果你需要创建简单的过渡效果，例如按钮的颜色变化或图像的淡入淡出，那么 CSS 动画通常是更好的选择。如果你需要更高级的交互性动画或动画逻辑，或者需要根据用户交互来控制动画，那么 JavaScript 动画可能更合适。在实际项目中，通常会将两者结合使用，以充分发挥它们的优势。

如果觉得这篇文章对你有帮助，希望多多点赞收藏加关注，也希望分享给更多爱学习的小伙伴，你的肯定是我最大的动力。

学习不打烊，充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题，每天坚持花20分钟来学习与思考，在千变万化，类库层出不穷的今天，不要等到找工作时才狂刷题，提倡每日学习。