目标

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

1. 请将 debounce 函数补充完整，实现一个延迟为 delay 毫秒的防抖函数。
2. 用户在输入框（ id=text ）输入文字时，将用户输入的内容存入 localStorage 中，缓存的 key 名称为 savedText ；页面加载时检查 localStorage 中是否有缓存文本数据，若有则将输入框（ id=text ）内容设置为相应的文本；当用户点击“发表”按钮（ id=post ）时，清空输入框（ id=text ）中的内容，并将 localStorage 内缓存的文本数据移除。
   • 此阶段的页面效果可以查看 effect-1.gif 文件。
3. 当输入框中没有文字时，将“发表”按钮（ 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) clearIntervaltimer=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) clearIntervaltimer=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;
}