这次给大家带来js的函数节流使用，js函数节流使用的注意事项有哪些，下面就是实战案例，一起来看一下。
函数节流(throttle)
函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。好像水滴攒到一定重量才会落下一样。
场景：
窗口调整（resize）
页面滚动（scroll）
抢购疯狂点击（mousedown）
实现：
function throttle(method, delay){ var last = 0; return function (){ var now = +new Date(); if(now - last > delay){ method.apply(this,arguments); last = now; } }}document.getElementById('throttle').onclick = throttle(function(){console.log('click')},2000);
登录后复制
underscore实现：
_.throttle = function(func, wait, options) { var context, args, result; var timeout = null; var previous = 0; if (!options) options = {}; var later = function() { previous = options.leading === false ? 0 : _.now(); timeout = null; result = func.apply(context, args); if (!timeout) context = args = null; }; return function() { var now = _.now(); if (!previous && options.leading === false) previous = now; //计算剩余时间 var remaining = wait - (now - previous); context = this; args = arguments; //剩余时间小于等于0或者剩余时间大于等待时间(本地时间变动出现) if (remaining wait) { if (timeout) { clearTimeout(timeout); timeout = null; } previous = now; result = func.apply(context, args); if (!timeout) context = args = null; } else if (!timeout && options.trailing !== false) { timeout = setTimeout(later, remaining); } return result; };};
登录后复制
函数防抖(debounce)
函数防抖就是在函数需要频繁触发情况时，只有足够空闲的时间，才执行一次。好像公交司机会等人都上车后才出站一样。
场景：
实时搜索（keyup）
拖拽（mousemove）
实现：
function debounce(method, delay){ var timer = null; return function(){ var context = this,args = arguments; clearTimeout(timer); timer = setTimeout(function(){ method.apply(context, args); },delay); }}document.getElementById('debounce').onclick = debounce(function(){console.log('click')},2000);
登录后复制
underscore实现：
_.debounce = function(func, wait, immediate) { var timeout, args, context, timestamp, result; var later = function() { var last = _.now() - timestamp; if (last = 0) { timeout = setTimeout(later, wait - last); } else { timeout = null; if (!immediate) { result = func.apply(context, args); if (!timeout) context = args = null; } } }; return function() { context = this; args = arguments; timestamp = _.now(); var callNow = immediate && !timeout; if (!timeout) timeout = setTimeout(later, wait); if (callNow) { result = func.apply(context, args); context = args = null; } return result; };};
登录后复制
函数节流(throttle)和函数防抖(debounce)都是通过延时逻辑操作来提升性能的方法，在前端优化中是常见且重要的解决方式。可以从概念和实际应用中理解两者的区别，在需要的时候选择合适的方法处理。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
用JS代码做出弹幕效果
用H5的canvas做出弹幕效果
以上就是JS的函数节流使用的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2783213.html
