蓝桥杯——朋友圈（防抖函数）

最新推荐文章于 2024-06-11 18:43:53 发布

COMEGy

最新推荐文章于 2024-06-11 18:43:53 发布

阅读量181

点赞数 5

文章标签：蓝桥杯职场和发展

本文链接：https://blog.csdn.net/m0_74206393/article/details/136994554

版权

文章介绍了如何在JavaScript中使用防抖函数(debounce)来优化输入框内容的实时保存，同时利用localStorage进行数据缓存，并在用户点击“发表”按钮时清除输入框内容和缓存数据。

摘要由CSDN通过智能技术生成

目标

请在 index.js 文件中补全代码，具体需求如下：

请将 debounce 函数补充完整，实现一个延迟为 delay 毫秒的防抖函数。
用户在输入框（ id=text ）输入文字时，将用户输入的内容存入 localStorage 中，缓存的 key 名称为 savedText ；页面加载时检查 localStorage 中是否有缓存文本数据，若有则将输入框（ id=text ）内容设置为相应的文本；当用户点击“发表”按钮（ id=post ）时，清空输入框（ id=text ）中的内容，并将 localStorage 内缓存的文本数据移除。
- 此阶段的页面效果可以查看 effect-1.gif 文件。
当输入框中没有文字时，将“发表”按钮（ id=post ）的 disabled 属性值设置为 disabled ；如果输入框中有文字则移除该属性。
- 注意：当用户点击“发表”按钮和初次进入页面时也会改变输入框的内容，此时也需要对按钮的情况作出判断。
- 页面最终效果可以查看 effect-2.gif 文件。

防抖函数的生成：

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

  // TODO: 请实现函数防抖的功能
  let timer='';
  return function(){
    if(timer) clearInterval
    timer=setTimeout(fn,delay)
  }

}

本地存储

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

题解

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


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

     // 提示正在保存中
     document.getElementById("prompt").textContent = "正在保存中...";
     
    // TODO: 请在此补充用户输入时设置缓存和调整按钮状态的代码

    // 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: 请在此补充用户点击“发表”按钮时清空文本框和缓存的代码
});

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

  // TODO: 请实现函数防抖的功能
  let timer='';
  return function(){
    if(timer) clearInterval
    timer=setTimeout(fn,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;
}