JS:函数的防抖与节流

共同点:在不影响客户体验的前提下,将频繁的回调函数,进行次数缩减.避免大量计算导致的页面卡顿.

差异:防抖是将多次执行变为最后一次执行

        节流是将多次执行变为在规定时间内只执行一次

1、防抖

什么是防抖呢?

触发事件后在规定时间内回调函数只能执行一次,如果在规定时间内触发了该事件,则会重新开始算规定时间。

具体化:当客户只关心连续操作后所返回结果的时候,连续操作导致了事件频繁调用,但其实最后一次调用才是最主要的。

分类: 立即执行跟非立即执行

优化一个mousemove事件:

image

1、立即执行

应用场景:事件触发->执行回调函数->延时;如果在延时中,继续触发事件,则会重新进行延时.在延时结束后,并不会执行回调函数.常见例子:就是对于按钮防点击.例如点赞,心标,收藏等有立即反馈的按钮.

image

image

2、 非立即执行

应用场景:事件触发->延时->执行回调函数;如果在延时中,继续触发事件,则会重新进行延时.在延时结束后执行回调函数.常见例子:就是input搜索框,客户输完过一会就会自动搜索

image

2、节流

什么是节流呢? 连续触发事件但是在规定时间内只执行一次函数。

适用的事件场景:

应用场景:需要监听填写手机号的数目

原先写法:直接绑定keyup事件

缺点:每当发生键盘输入事件时,就会一直调用方法(频繁调用,不必要且占用过多内存)

改写方法:

在ngOnInit就要调用这个监听事件(ps: 事件名不能是官方已经定义的名称)

还需要在ngDestory取消这个事件的监听

节流函数如下:

apply可参见:https://www.cnblogs.com/hxw1024/p/12077636.html

posted @ 2019-12-22 22:28  浅笑浅语  阅读(238)  评论(0编辑  收藏  举报