编程修炼指南：手写JS常用方法，让你成为Web开发达人
2023-08-03 22:42:44
JavaScript 函数防抖与节流：让你的代码更加敏捷
在前端开发中，我们经常会遇到需要对事件进行处理的情况，比如用户输入、鼠标移动等。如果我们对这些事件进行频繁的处理，很容易造成性能问题。因此，我们可以使用函数防抖和函数节流来优化代码，让它更加敏捷。
什么是函数防抖？
函数防抖是一种技术，它可以防止某个函数在短时间内被多次触发。它通常用于处理用户输入事件，比如当用户在搜索框中输入文字时，我们不希望在每次用户输入一个字符时都触发搜索请求，而是等到用户停止输入一段时间后才触发。
函数防抖的原理
函数防抖的原理很简单，就是设置一个定时器。当函数被触发时，会重置定时器。如果在定时器到期之前函数再次被触发，则取消上一个定时器并重新设置一个新的定时器。这样，就确保了函数只会被触发一次，直到定时器到期。
函数防抖的实现
我们可以使用以下代码来实现函数防抖：
function debounce(fn, delay) {
let timer = null;
return function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
};
}
什么是函数节流？
函数节流是一种技术，它可以控制某个函数在一定时间内只被执行一次。它通常用于处理频繁发生的事件，比如鼠标移动事件。当鼠标在页面上移动时，我们不希望在每次鼠标移动时都触发某个函数，而是只在鼠标移动一段时间后才触发。
函数节流的原理
函数节流的原理也很简单，就是设置一个标记位。当函数被触发时，会检查标记位是否为 true。如果标记位为 true，则函数会被执行。然后，将标记位设置为 false，并在一段时间后将标记位重新设置为 true。这样，就确保了函数只会被执行一次，直到标记位重新设置为 true。
函数节流的实现
我们可以使用以下代码来实现函数节流：
function throttle(fn, delay) {
let canRun = true;
return function () {
if (!canRun) {
return;
}
canRun = false;
setTimeout(() => {
fn.apply(this, arguments);
canRun = true;
}, delay);
};
}
函数防抖与函数节流的对比
函数防抖和函数节流都是用来优化事件处理的技术，但它们有不同的应用场景。函数防抖用于防止函数在短时间内被多次触发，而函数节流用于控制函数在一定时间内只被执行一次。
函数防抖与函数节流的代码示例
为了更好地理解函数防抖和函数节流，我们可以看一个代码示例：
const searchInput = document.getElementById('search-input');
const debouncedSearch = debounce((e) => {
const value = e.target.value;
// 这里执行搜索请求
}, 500);
searchInput.addEventListener('input', debouncedSearch);
const throttledMouseMove = throttle((e) => {
const x = e.clientX;
const y = e.clientY;
// 这里执行鼠标移动处理逻辑
}, 100);
document.addEventListener('mousemove', throttledMouseMove);
在这个示例中，我们对搜索输入框的 input 事件使用了函数防抖，这样在用户输入时不会频繁触发搜索请求。我们对 document 的 mousemove 事件使用了函数节流，这样在鼠标移动时不会频繁触发鼠标移动处理逻辑。
Promise：异步编程的新利器
Promise是一种ES6中引入的新特性，它可以让我们更方便地处理异步操作。在以前，我们处理异步操作通常使用回调函数，但回调函数容易导致代码嵌套过多，难以维护。Promise的出现解决了这个问题，它允许我们使用更简洁的语法来处理异步操作，让代码更加清晰易读。
什么是 Promise？
Promise是一个表示异步操作最终完成或失败的 JavaScript 对象。当异步操作完成时，Promise会得到解析，并返回一个结果。当异步操作失败时，Promise会得到拒绝，并返回一个错误。
Promise 的用法
我们可以使用以下代码来创建一个 Promise：
const promise = new Promise((resolve, reject) => {
// 异步操作
setTimeout(() => {
resolve('成功');
}, 2000);
});
然后，我们可以使用 then() 方法来处理 Promise 的解析结果：
promise.then((result) => {
console.log(result); // 成功
}).catch((error) => {
console.log(error); // 失败
});
Ajax：跨域请求的秘密武器
Ajax（Asynchronous JavaScript and XML）是一种用于实现异步通信的技术。它允许我们向服务器发送请求并接收响应，而无需重新加载整个页面。Ajax被广泛用于构建Web应用程序，因为它可以提高用户体验并加快页面加载速度。
什么是 Ajax？
Ajax是一种使用XMLHttpRequest对象向服务器发送请求和接收响应的技术。XMLHttpRequest对象是一个内置的 JavaScript 对象，它允许我们与服务器进行异步通信。
Ajax 的用法
我们可以使用以下代码来创建一个 Ajax 请求：
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 打开请求
xhr.open('GET', 'https://example.com/api/data');
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json');
// 发送请求
xhr.send();
// 监听服务器响应
xhr.onload = function () {
if (xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
console.log(data);
} else {
console.log('请求失败');
}
};
结论
函数防抖、函数节流、Promise和Ajax都是 JavaScript 中的常用方法，掌握它们可以极大地提升你的前端开发技能，让你在开发世界里畅游无阻。赶快行动起来，学习这些方法，成为一名真正的Web开发达人吧！
常见问题解答
-
函数防抖和函数节流有什么区别？
函数防抖用于防止函数在短时间内被多次触发，而函数节流用于控制函数在一定时间内只被执行一次。
-
Promise 是什么？
Promise是表示异步操作最终完成或失败的 JavaScript 对象。
-
Ajax 是什么？
Ajax是一种用于实现异步通信的技术，它允许我们向服务器发送请求并接收响应，而无需重新加载整个页面。
-
如何使用函数防抖？
可以使用以下代码来实现函数防抖：
function debounce(fn, delay) { let timer = null; return function () { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { fn.apply(this, arguments); }, delay); }; } -
如何使用函数节流？
可以使用以下代码来实现函数节流：
function throttle(fn, delay) { let canRun = true; return function () { if (!canRun) { return; } canRun = false; setTimeout(() => { fn.apply(this, arguments); canRun = true; }, delay); }; }
