📄 代码片段收藏

防抖函数 (JavaScript)

function debounce(fn, delay) {
  let timer;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}
// 使用：窗口resize事件防抖
window.addEventListener('resize', debounce(() => {
  console.log('resized');
}, 300));

防抖常用于输入框搜索、窗口缩放等高频事件优化。

Promise 基本使用与链式调用 (JavaScript)

// 模拟异步请求
function fetchData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (url) {
        resolve(`数据来自 ${url}`);
      } else {
        reject('URL 无效');
      }
    }, 1000);
  });
}

// 链式调用
fetchData('https://api.example.com/user')
  .then(data => {
    console.log(data);
    return fetchData('https://api.example.com/posts');
  })
  .then(posts => console.log(posts))
  .catch(err => console.error(err));

Promise 用于处理异步操作，通过 then/catch 实现链式调用，避免回调地狱。

CSS Grid 常用布局

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.item {
  background: #eef2f8;
  padding: 20px;
}

三列等宽布局，间距20px。