面试题集锦第一弹

1、浅析函数防抖与函数节流

函数防抖:

最近和前端的小伙伴们，在讨论面试题的时候。谈到了函数防抖和函数节流的应用场景和原理。于是，想深入研究一下两者的异同。对于后端而言，函数防抖、函数节流的使用场景并不是很多。但是，对于前端使用却是很常见。这是我简单理解的函数防抖和节流。

函数防抖就是在事件触发后，时间n秒后，再执行函数调用，如果在n秒内又重新触发该事件，那么就会重新计算函数时间

上代码，这是简洁的一段防抖代码。

var time;
function debounce(fn,delay){
	clearTimeout(time);
	time= setTimeout(function(){
		fn();
	},delay)
}
// test
function testDebounce() {
    console.log('test');
}
document.onmousemove = () => {
  debounce(testDebounce, 1000);
}

上面例子中的debounce就是防抖函数，在document中鼠标移动的时候，会在onmousemove最后触发的1s后执行回调函数testDebounce；如果我们一直在浏览器中移动鼠标（比如10s），会发现会在10 + 1s后才会执行testDebounce函数（因为clearTimeout(timer)），这个就是函数防抖。

在上面的代码中，会出现一个问题，var timer只能在setTimeout的父级作用域中，这样才是同一个timer，并且为了方便防抖函数的调用和回调函数fn的传参问题，我们应该用闭包来解决这些问题。
代码优化

function debounce(fn, delay) {
    var timer; // 维护一个 timer
    return function () {
        var _this = this; // 取debounce执行作用域的this
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn.apply(_this, args); // 用apply指向调用debounce的对象，相当于_this.fn(args);
        }, delay);
    };
}
// test
function testDebounce(e, content) {
    console.log(e, content);
}
var testDebounceFn = debounce(testDebounce, 1000); // 防抖函数
document.onmousemove = function (e) {
    testDebounceFn(e, 'debounce'); // 给防抖函数传参
}

使用闭包后，解决传参和封装防抖函数的问题，这样就可以在其他地方随便将需要防抖的函数传入debounce了。

函数节流

他每隔一段时间，只会执行一次函数。

function throttle(fn, delay) {
    var timer;
    return function () {
        var _this = this;
        var args = arguments;
        if (timer) {
            return;
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
            timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
        }, delay)
    }
}
function testThrottle(e, content) {
    console.log(e, content);
}
var testThrottleFn = throttle(testThrottle, 1000); // 节流函数
document.onmousemove = function (e) {
    testThrottleFn(e, 'throttle'); // 给节流函数传参
}

上面例子中，如果我们一直在浏览器中移动鼠标（比如10s），则在这10s内会每隔1s执行一次testThrottle，这就是函数节流。

函数节流的目的，是为了限制函数一段时间内只能执行一次。因此，定时器实现节流函数通过使用定时任务，延时方法执行。在延时的时间内，方法若被触发，则直接退出方法。从而，实现函数一段时间内只执行一次。

根据函数节流的原理，我们也可以不依赖 setTimeout实现函数节流。

异同比较 ：

相同点：他们都可以用setTimeout来执行函数
都减少了对函数的执行回调频率
不同点:函数抖动在连续一段操作时间后，处理回调。利用setTimeout和clearTimeout来执行。函数节流在每一段时间内，只能执行一次。
函数抖动只是在最后只时间段只执行一次，而函数节流是在一段时间内执行一次。

常见应用场景

函数防抖的应用场景
连续的事件，只需触发一次回调的场景有：
搜索框搜索输入。只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测
窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

函数节流的应用场景
间隔一段时间执行一次回调的场景有：
滚动加载，加载更多或滚到底部监听
谷歌搜索框，搜索联想功能
高频点击提交，表单重复提交
文档中出现的源代码都在这里: 防抖、节流

原生中的window. onload和jQuery中的 ready函数 $(function(){})

原生中的window.onload和JQuery中的ready（）函数都是表示DOM结构绘制完毕，即在window.onload和reday()函数里都可以获得DOM对象了。
但是他们是有区别的:
一、执行时机:
window.onload除了在DOM结构加载完毕，还需要等到页面里包括的图片文件等资源文件加载完毕。不但他的src可以获取到，src后面的图片也可以获取加载完毕
$（doucument）.ready（）是DOM结构绘制完毕就执行，不管资源文件是否加载完毕都可以
二、编写方式个数不同
1、window.onload不能同时编写多个，如有多个window.onload方法只会执行一个
后面的函数会覆盖前面的函数

2、$(document).ready()可以同时编写多个。并且都会执行
执行完第一个弹出框之后执行第二个弹出框