ajax请求防抖,js防抖和节流debounce&throttle

起初写一些ajax请求时没有防抖节流处理，一不小心点了多次会给服务器端造成压力，同时渲染时也会给浏览器端造成压力。

函数防抖(debounce)：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

function debounce(fn) {

// 4、创建一个标记用来存放定时器的返回值

let timeout = null;

return function() {

// 5、每次当用户点击/输入的时候，把前一个定时器清除

clearTimeout(timeout);

// 6、然后创建一个新的 setTimeout，

// 这样就能保证点击按钮后的 interval 间隔内

// 如果用户还点击了的话，就不会执行 fn 函数

timeout = setTimeout(() => {

fn.call(this, arguments);

}, 1000);

};

}

函数节流(throttle)：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。比如百度搜索下对输入关键字的预加载。

function throttle(fn) {

// 4、通过闭包保存一个标记

let canRun = true;

return function() {

// 5、在函数开头判断标志是否为 true，不为 true 则中断函数

if(!canRun) {

return;

}

// 6、将 canRun 设置为 false，防止执行之前再被执行

canRun = false;

// 7、定时器

setTimeout( () => {

fn.call(this, arguments);

// 8、执行完事件(比如调用完接口)之后，重新将这个标志设置为 true

canRun = true;

}, 1000);

};

}