解决抖动之函数防抖

函数的抖动:简单来说就是一个函数在短时间内大量频繁调用,但是很多次调用都不是必须的

在js中,哪些情况容易遇到抖动?

到底哪些事件会频繁调用?

鼠标移动事件

移入移出事件

input输入事件

滚动条滚动事件(onscroll)

尺寸改变事件(onresize)

......

而很多次函数其实没必要调用,他都是无效执行,所以要想办法解决;


解决抖动之防抖


防抖:就是防止函数内的代码在短时间内大量执行,只让它最终执行一次

步骤:

把要执行的代码包到setTimeout里

在短时间内大量调用函数的时候,先把上一次的计时器清掉,再开一个新的,这样就能保证短时间内大量调用函数时,代码不会被执行(因为在不断的刷新计时器)

只有当你停下来一段时间,计时器才会执行

let timerID = null;

        document.body.onscroll = function () {

            clearTimeout(timerID)

            // 把要执行的代码打包到计时器里

            timerID = setTimeout(() => {

                console.log('滚动了');

            }, 300); //0.5秒

        }



封装成函数

function fangdou(callback, time) {

            //因为这个函数内部需要用到timerID,所以应该吧timerID

            //声明就写到函数内部,所以写成了闭包

            let timerID = null;

            return function () {

                clearTimeout(timerID)

                // 把要执行的代码打包到计时器里

                timerID = setTimeout(callback, time); //time时间后调用callback函数

            }

        }

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容