# 前端开发中如何处理接口数据过大的问题

## 正文：

### 防抖节流

``````function debounce(fn, delay, immediate = false,resultCall) {
let timer = null;
let isInvoke = false;
let result = null;
//返回给元素的真正函数
const _debounce = function (...args) {
//取消上一次的操作
if (timer) clearTimeout(timer);
//如果是第一次执行或者已经执行完的，采取立即执行
if (immediate && !isInvoke) {
result =  fn.apply(this, args);
if(resultCall){
resultCall(result)
}
isInvoke = true;
}
//开启防抖
else {
timer = setTimeout(() => {
//执行真正的函数
result =  fn.apply(this, args);
if(resultCall){
resultCall(result)
}
isInvoke = false;
}, delay);
}
};
//取消事件
_debounce.cancel = function () {
if (timer) clearTimeout(timer);
};
return _debounce;
}
``````

``````function throttle(fn, interval, options = { leading: true, trailing: false }) {
// 1.记录上一次的开始时间
//trailing记录要不要进行定时器触发
const { leading, trailing } = options
let lastTime = 0
let timer = null

// 2.事件触发时, 真正执行的函数
const _throttle = function(...args) {
// 2.1.获取当前事件触发时的时间
const nowTime = new Date().getTime()
//要不要同步执行
if (!lastTime && !leading) lastTime = nowTime
// 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长事件需要去触发函数
const remainTime = interval - (nowTime - lastTime)
if (remainTime <= 0) {
if (timer) {
clearTimeout(timer)
timer = null
}
// 2.3.真正触发函数
fn.apply(this, args)
// 2.4.保留上次触发的时间
lastTime = nowTime
return
}
if (trailing && !timer) {
timer = setTimeout(() => {
timer = null
lastTime = !leading ? 0: new Date().getTime()
fn.apply(this, args)
}, remainTime)
}
}
_throttle.cancel = function() {
if(timer) clearTimeout(timer)
timer = null
lastTime = 0
}
return _throttle
}
``````

### 定时处理

createElement相比，它最大的好处就是不会触发DOM树的重新渲染，且不会对性能造成影响。因为所有的节点会被一次性插入到文档中，所以仅会发生一个重渲染的操作，而不是每个节点分别被插入到文档中从而发生多次重渲染的操作。

``````<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<body>
<ul id="list"></ul>
<script>
const total = 10000;
const num = 20;
const times = Math.ceil(total / num);
let currentNums = 0;
const ul = document.querySelector("#list");
let frag = new DocumentFragment();
for (let i = 0; i < num; i++) {
const li = document.createElement("li");
li.innerHTML = Math.floor(i + currentNums * num);
frag.appendChild(li);
}
currentNums++;
ul.appendChild(frag);
if (currentNums < times) {
}
}
</script>
</body>
</html>
``````

## 结尾：
{"ft_lang_label":"__label__zh","ft_lang_prob":0.55412847,"math_prob":0.9878611,"size":3241,"snap":"2023-40-2023-50","text_gpt3_token_len":1563,"char_repetition_ratio":0.10287303,"word_repetition_ratio":0.04833837,"special_character_ratio":0.26164764,"punctuation_ratio":0.20575221,"nsfw_num_words":0,"has_unicode_error":false,"math_prob_llama3":0.9533074,"pos_list":[0,1,2,3,4],"im_url_duplicate_count":[null,null,null,null,null],"WARC_HEADER":"{\"WARC-Type\":\"response\",\"WARC-Date\":\"2023-09-24T16:01:19Z\",\"WARC-Record-ID\":\"<urn:uuid:5da75181-2bee-4356-8a92-d268e278a53a>\",\"Content-Length\":\"226714\",\"Content-Type\":\"application/http; msgtype=response\",\"WARC-Warcinfo-ID\":\"<urn:uuid:a4ccbf6c-40c2-44b6-843f-d5f4320e6f57>\",\"WARC-Concurrent-To\":\"<urn:uuid:f851db4e-ac3f-4b84-a0b7-fea52882447c>\",\"WARC-IP-Address\":\"1.117.187.189\",\"WARC-Target-URI\":\"https://www.ge69.com/51937.html\",\"WARC-Payload-Digest\":\"sha1:NHVTPPQUQW2PKDBJ43H73XOYBDGBRL24\",\"WARC-Block-Digest\":\"sha1:P7XZMTWBVUS6D7ZLKVSLASIOCABACPI6\",\"WARC-Identified-Payload-Type\":\"text/html\",\"warc_filename\":\"/cc_download/warc_2023/CC-MAIN-2023-40/CC-MAIN-2023-40_segments_1695233506658.2_warc_CC-MAIN-20230924155422-20230924185422-00152.warc.gz\"}"}