仅做记录之用
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 秒内又触发了事件,则会重新计算函数延执行时间。简单来说就是,一段时间内重复触发,只执行开始一次和结尾一次,或者只执行结尾那次