前端面试--函数防抖和函数节流

函数防抖和函数节流：

函数防抖（debounce）

概念：延迟要执行的动作，若果在延迟的这段时间内，再次触发，取消之前开启的动作，重新计时

举例：电脑休眠，一旦鼠标移动，就重新计时

实现：定时器

应用：搜索时等用户完整输入内容后在发送查询请求（自动）

let inputNode = document.getElementById('user_id');
let id; // 定时器需要定义在函数外，不然每次都会被清掉
inputNode.addEventListener('keyup',function(){
    let value = inputNode.value;
    if(id){clearTimeout(id)} // 如果定时器有内容（第一次为空）
    id = setTimeout(()=>{
        sendAjax(value); // 模拟ajax发送请求
    },300)
})

函数节流（throttle）

概念：设定一个特定的时间，让函数在特定的时间内只执行一次，不会频繁执行

举例：fps游戏（第一人称射击游戏）鼠标按住不松手，子弹也不会连城一条线

实现：定时器、标识

需求：鼠标滚轮滚动时，每隔两秒，打印一次

let canLog = true;
document.body.onscroll=function(){
    if(canLog){
        console.log('111');
        canLog = false;
        setTimeout(()=>{
            canLog = true;
        },2000)
       }
}