scroll 事件本身会触发页面的重新渲染，同时 scroll 事件的 handler 又会被高频度的触发, 因此事件的 handler 内部不应该有复杂操作，例如 DOM 操作就不应该放在事件处理中。
针对此类高频度触发事件问题（例如页面 scroll ，屏幕 resize，监听用户输入等），有两种常用的解决方法，防抖和节流。
9.1 防抖(Debouncing)实现
典型例子：限制 鼠标连击 触发。
一个比较好的解释是：
当一次事件发生后，事件处理器要等一定阈值的时间，如果这段时间过去后 再也没有 事件发生，就处理最后一次发生的事件。假设还差 0.01 秒就到达指定时间，这时又来了一个事件，那么之前的等待作废，需要重新再等待指定时间。
// 防抖动函数 function debounce(fn,wait=50,immediate) { let timer; return function() { if(immediate) { fn.apply(this,arguments) } if(timer) clearTimeout(timer) timer = setTimeout(()=> { fn.apply(this,arguments) },wait) } }
结合实例：滚动防抖
// 简单的防抖动函数 // 实际想绑定在 scroll 事件上的 handler function realFunc(){ console.log("Success"); } // 采用了防抖动 window.addEventListener('scroll',debounce(realFunc,500)); // 没采用防抖动 window.addEventListener('scroll',realFunc);
9.2 节流(Throttling)实现
可以理解为事件在一个管道中传输，加上这个节流阀以后，事件的流速就会减慢。实际上这个函数的作用就是如此，它可以将一个函数的调用频率限制在一定阈值内，例如 1s，那么 1s 内这个函数一定不会被调用两次
简单的节流函数:
function throttle(fn, wait) { let prev = new Date(); return function() { const args = arguments; const now = new Date(); if (now - prev > wait) { fn.apply(this, args); prev = new Date(); } }
9.3 结合实践
通过第三个参数来切换模式。
const throttle = function(fn, delay, isDebounce) { let timer let lastCall = 0 return function (...args) { if (isDebounce) { if (timer) clearTimeout(timer) timer = setTimeout(() => { fn(...args) }, delay) } else { const now = new Date().getTime() if (now - lastCall < delay) return lastCall = now fn(...args) } } }
10. 手写一个JS深拷贝
有个最著名的乞丐版实现，在《你不知道的JavaScript（上）》里也有提及：
10.1 乞丐版
var newObj = JSON.parse( JSON.stringify( someObj ) );
10.2 面试够用版
function deepCopy(obj){ //判断是否是简单数据类型， if(typeof obj == "object"){ //复杂数据类型 var result = obj.constructor == Array ? [] : {}; for(let i in obj){ result[i] = typeof obj[i] == "object" ? deepCopy(obj[i]) : obj[i]; } }else { //简单数据类型 直接 == 赋值 var result = obj; } return result; }
关于深拷贝的讨论天天有，这里就贴两种吧，毕竟我...
11.实现一个instanceOf
function instanceOf(left,right) { let proto = left.__proto__; let prototype = right.prototype while(true) { if(proto === null) return false if(proto === prototype) return true proto = proto.__proto__; } }
以上所述是小编给大家介绍的JavaScript手写代码详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: