ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

防抖节流笔记

2021-09-04 17:31:09  阅读:170  来源: 互联网

标签:触发 防抖 定时器 节流 笔记 timeout 执行


性能优化----防抖 节流

防抖和节流都是为了控制函数的执行
防抖:控制函数多次触发只能执行最后一次
节流:控制执行次数,多次触发只执行一次

防抖

function debounce(fn){
let timer=null
return function(){
clearTimeout(timer)
timer=setTimeout(()=>{
// 改变this指向,使this指向目前所在标签
fn.call(this)
},1000)}
}

理解:当函数触发后会清除之前的定时器并新建新的定时器,使得定时器部分重新执行,当连续触发事件时,每触发一次定时器便新建一次,达到只执行最后一次的效果。

触发我就清除你,重新开始

节流

function throttle(fn){
let timeout
return function(){
if(!timeout){
timeout=setTimeout(()=>{
// 改变this指向,使this指向目前所在标签
fn.call(this)
timeout=null
},1000) }
}
}

理解:当函数触发后通过判断定时器是否存在来控制函数的执行,定时器中内容未执行完时timeout不为空,即无法再次触发定时器,只能等待定时器执行完只能,将timeout重置为空时,才能再次触发。

触发就触发,我就不搭理你

参考文章

标签:触发,防抖,定时器,节流,笔记,timeout,执行
来源: https://blog.csdn.net/qq_44087189/article/details/120102197

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有