JavaScript防抖和节流

无论是防抖还是节流都是为了避免回调函数中的处理随着连续触发事件每次都执行

防抖和节流都是为了防止函数(事件)的连续触发(连续触发有很多种onscroll,onkeydown等键盘事件和onmousemove鼠标事件等)所造成的性能问题,其实类似于事件循环和虚拟dom,对于事件的业务代码我们都放在回调函数里,同时不可能每次改变我都需要立马给你同步,所以我们需要控制回调函数执行的频率(就和一些事一样太频繁了也不好),连续触发的会造成函数的连续执行这样肯定会在性能上有影响

防抖

总体来说防抖同样没有破坏事件控制业务代码的行为,在防抖函数找那个控制业务代码频率的仍然是事件本身,定时器只是辅助作用

如下:

// 计时器
var timer = false;
// 
window.onscroll = function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
        console.log("防抖");
        console.log(new Date());
    },300);
};

连续触发的滚动事件:滚动事件的触发是连续的,同时事件函数的运行与触发滚动的频率是一致的。我们想要执行的业务代码在定时器函数中,正常一个函数运行的时候我们首先创建一个执行栈去存放同步代码,同时起一个任务队列(也就是异步代码),我们事件函数连续触发我们会被不断地将同步代码clearTimeout(timer)执行,这样我们异步队列挂起待执行的setTimeout的回调函数的执行条件是300ms,但是事件连续触发的频率远远小于300ms,导致clearTimeout(timer)的函数执行始终在任务队列中没有执行的时候就把定时器干掉,所有保证执行的先决条件就是滚动停止的时候即截止到最后一次没有被干掉的定时器触发了业务代码

节流

节流的思想其实相对于防抖来说他就是让回调函数的业务代码在指定的时间内只运行一次,此处指定的时间划重点,此时控制的主动权在定时器,定时器的业务代码保证在定时器的指定时间内只进行,当然这时需要用一个控制开关去控制代码运行,这时候就需要一个变量去起到借力打力的作用。
看下边的一个例子

var flag = true;

window.onscroll = function(){
    if(flag) {
      console.log("节流" + new Date());
       flag = false;
    }
    setTimeout(function(){
        
        flag = true;
    },300);
};

在上面代码中我们看到定义了一个变量flag去作为控制开关,并且定义这个开关的位置并不是事件函数的本身的私有作用域。因为私有作用域中的变量很容易被本身的执行栈所控制导致变量被重复声明,导致本身对flag的改变都被开始的var所覆盖。联想到作用域链,我们设置这个开关我们只想用他的值去,而且去改变他的值时不需要对它重新声明,所以我们我们需要把它提升到比他高一级的作用域中,这样就不需要我们去重复声明。
运行过程:我们通过变量的去控制业务代码,当flag为true时我们才会执行业务代码,当我们的业务代码执行完成后,我们将开关赋值为false,这样事件触发时就不会执行业务代码,但我们把开关的开启放在定时器,没当定时器的时间到的时候我们都会去触发开关的flag的值为true,这样下一次事件触发时业务代码会再次执行

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容