JavaScript 基础:防抖与节流
栏目: JavaScript · 发布时间: 5年前
内容简介:今天,我们要讲的是防抖与节流的知识。防抖:当触发动作停够指定时间才触发事件节流:不管触发动作多么密集,事件之间的必须要有足够的间隔时间
今天,我们要讲的是防抖与节流的知识。
含义
防抖:当触发动作停够指定时间才触发事件
节流:不管触发动作多么密集,事件之间的必须要有足够的间隔时间
比喻
防抖:假如你有一个善变的老婆,如果她一会要你给她买品牌A,一会说要你给她买品牌B,你很烦,就对她说,当你做完决定, 一天 内不变,我就给你买。
节流:假如你有一个爱花钱的老婆,她一个月让你买 10 个包,你很烦,就对她说, 每个月 只能买 1 个包。
应用场景
防抖:一边在输入框里打字,一边发请求校验,可以用防抖技术,让用户停止输入足够时间后,再发请求。
节流:监听滚动事件(比如图片懒加载)时候,可以用节流技术,减少触发事件的执行次数,减少性能消耗。
代码
防抖:
function debounce(func, wait) { var timeout; return function () { var args = arguments; var context = this; clearTimeout(timeout); timeout = setTimeout(func.bind(context,args), wait); } }
利用柯里化消化 wait
参数,使用 setTimeout
延迟执行函数,如果新的触发动作进来,就取消上次的 setTimeout
。
节流:
function throttle(func, wait) { var pending = false; return function () { if(pending) { return; } var args = arguments; var context = this; pending = true; setTimeout(() => { func.apply(context, args); pending = false; }, wait); } }
利用柯里化消化 wait
参数,使用 pending
记录上次执行事件是否在等待中,如果是就返回,否则就开始新的等待。
如果您觉得本博客帮到了您,就打赏支持一下吧~
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
闪魂FLASH8网站建设实录
马谧铤 / 中国林业 / 2006-7 / 46.00元
《闪魂FLASH8网站建设实录》旨在提供以Flash(Flash 8.0为创作工具)为技术核心的整套互动网站的开发思路,其中包括了网站策划、平面设计、程序设计等实用的互联网应用技术。内容包括Photoshop CS2设计,FIash 8创作和ActionScript应用程序开发的操作流程。在技术学习的过程中.大家还将体会到顶级互动网站设计、网站建设的设计流程和思路。《闪魂FLASH8网站建设实录》......一起来看看 《闪魂FLASH8网站建设实录》 这本书的介绍吧!