1.请求队列
javascript
const queue = [];
queue.push();
queue.shift;
class RequestQueue {
constructor(maxConcurrent) {
this.maxConcurrent = maxConcurrent; // 最大并发请求数
this.currentConcurrent = 0; // 当前并发请求数
this.queue = []; // 请求队列
add(request) {
return new Promise(resolve,reject) => {
this.queue.push({ request, resolve, reject });
this.processQuese();
});
}
processQuese() {
if (this.queue.length > 0 && this.currentConcurrent < maxConcurrent) {
const { request, resolve, reject } = this.queue.shift();
this.currentConcurrent++;
request()
.then(resolve)
.catch(reject)
.finaly(() => {
this.currentConcurrent--;
this.processQuese();
});
}
}
}
// 实力请求函数
function fetchData(url) {
return fetch(url).then(respomse => response.json());
}
// 使用请求队列
constrequestQuese = new RequestQueue(5); // 设定并发请求数为5
const urls = [
"https://api.example.com/data1",
"https://api.example.com/data2",
};
const requests = urls.map(url => () => fetchData((url));
Promise.all(requests.map(request => requestQueue.add(request)))
.then(results => {
console.log("所有请求完成", result);
})
.catch(error => {
console.error("请求失败", error);
});
2.防抖/节流
-防抖(debounce)
-节流 (throttle)
-防抖 (Debounce) : 确保在指定时间内函数只执行一次,常用于输入框的搜索建议
-节流 (Throttle) : 确保在指定时间间隔内函数执行一次,常用于窗口的 resize scroll 事件
javascript
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this