【15蓝桥杯模拟赛3期】朋友圈

仅做记录之用

document.addEventListener("DOMContentLoaded", function () {
  // TODO: 请在此补充页面加载时缓存检查的代码
  let text = document.getElementById("text");
  let btn = document.querySelector("#post");
  if (localStorage.getItem("savedText")) {
    text.value = JSON.parse(localStorage.getItem("savedText"));
    btn.removeAttribute('disabled')
  } else {
    btn.setAttribute('disabled','disabled')
  }
});

// 当文本框输入内容改变时，动态地设置localStorage缓存，并根据有没有文本改变按钮状态
// 此处使用了防抖函数，避免太过频繁地更新缓存
document.getElementById("text").addEventListener(
  "input",
  debounce(function () {
    // 提示正在保存中
    document.getElementById("prompt").textContent = "正在保存中...";

    // TODO: 请在此补充用户输入时设置缓存和调整按钮状态的代码
    console.log(this.value);
    let btn = document.querySelector("#post");
    let text = document.getElementById("text");
    if (text.value.trim().length != 0) {
      localStorage.setItem("savedText", text.value);
      // btn.disabled = false;
      btn.removeAttribute('disabled')
    } else {
      // btn.disabled = true;
      btn.setAttribute('disabled','disabled')
    }
    // TODO-END

    // 过一段时间后提示保存完成，模拟上传数据至后台的效果
    setTimeout(function () {
      document.getElementById("prompt").textContent = "内容已保存";
    }, 750);
  }, 200)
);

document.getElementById("post").addEventListener("click", function () {
  const content = document.getElementById("text").value;
  const element = createContent(content);
  document.querySelector(".contents").appendChild(element);
  document.getElementById("prompt").textContent = "";

  // TODO: 请在此补充用户点击“发表”按钮时清空文本框和缓存的代码
  document.getElementById("text").value = ""
  localStorage.removeItem("savedText")
  // document.querySelector("#post").disabled = true
  document.querySelector("#post").setAttribute('disabled','disabled')
});

// 防抖工具函数
/**
 * @param  {function} fn  - 回调函数
 * @param  {string} delay - 函数执行延迟，单位为ms
 */
function debounce(fn, delay) {
  //return fn; // 这一行是为了确保页面正常运行，可以去掉

  // TODO: 请实现函数防抖的功能
  let timeId 
  return function(...a){
    if(timeId) clearTimeout(timeId)
    timeId = setTimeout(function(){
      fn.apply(this,a)
    },delay)
  }
}

// 用户点击“发表”后，创建一条新信息的DOM元素
function createContent(content) {
  const div = document.createElement("div");
  const d = new Date();
  const deleteBtn = document.createElement("button");
  deleteBtn.textContent = "删除";
  deleteBtn.addEventListener("click", function () {
    div.remove();
  });
  div.innerHTML = `<div><span class="content">${content}</span><span class="date">${d.toLocaleString()}</span></div>`;
  div.appendChild(deleteBtn);
  return div;
}

心得：

1.定时器逻辑是等待设置好的delay时间后再执行里面的回调函数
2.函数防抖，就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。简单来说就是，一段时间内重复触发，只执行开始一次和结尾一次，或者只执行结尾那次