【建议收藏】2024大厂JavaScript面试题汇总

7.函数柯里化

---

在一个函数中，首先填充几个参数，然后再返回一个新的函数的技术，称为函数的柯里化。通常可用于在不侵入函数的前提下，为函数 预置通用参数，供多次重复调用。

const add = function add(x) {

return function (y) {

return x + y

}

}

const add1 = add(1)

add1(2) === 3

add1(20) === 21

8.js的防抖

---

防抖（Debouncing）

防抖技术即是可以把多个顺序地调用合并成一次，也就是在一定时间内，规定事件被触发的次数。

通俗一点来说，看看下面这个简化的例子：

// 简单的防抖动函数

function debounce(func, wait, immediate) {

// 定时器变量

var timeout;

return function() {

// 每次触发 scroll handler 时先清除定时器

clearTimeout(timeout);

// 指定 xx ms 后触发真正想进行的操作 handler

timeout = setTimeout(func, wait);

};

};

// 实际想绑定在 scroll 事件上的 handler

function realFunc(){

console.log(“Success”);

}

// 采用了防抖动

window.addEventListener(‘scroll’,debounce(realFunc,500));

// 没采用防抖动

window.addEventListener(‘scroll’,realFunc);

上面简单的防抖的例子可以拿到浏览器下试一下，大概功能就是如果 500ms 内没有连续触发两次 scroll 事件，那么才会触发我们真正想在 scroll 事件中触发的函数。

上面的示例可以更好的封装一下

// 防抖动函数

function debounce(func, wait, immediate) {

var timeout;

return function() {

var context = this, args = arguments;

var later = function() {

timeout = null;

if (!immediate) func.apply(context, args);

};

var callNow = immediate && !timeout;

clearTimeout(timeout);

timeout = setTimeout(later, wait);

if (callNow) func.apply(context, args);

};

};

var myEfficientFn = debounce(function() {

// 滚动中的真正的操作

}, 250);

// 绑定监听

window.addEventListener(‘resize’, myEfficientFn);

9.js节流

---

防抖函数确实不错，但是也存在问题，譬如图片的懒加载，我希望在下滑过程中图片不断的被加载出来，而不是只有当我停止下滑时候，图片才被加载出来。又或者下滑时候的数据的 ajax 请求加载也是同理。

这个时候，我们希望即使页面在不断被滚动，但是滚动 handler 也可以以一定的频率被触发（譬如 250ms 触发一次），这类场景，就要用到另一种技巧，称为节流函数（throttling）。

节流函数，只允许一个函数在 X 毫秒内执行一次。

与防抖相比