zoukankan      html  css  js  c++  java
  • JavaScript节流与防抖函数封装

    js节流与防抖函数封装

    常见应用场景:

    • window的 resize 和 scroll 事件;
    • 文字输入时的 keyup 事件;
    • 元素拖拽、移动时的 mousemove 事件;

    防抖

    • 定义:多次触发事件后,事件处理函数只执行一次,并且是在触发操作结束时执行
    • 原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清除上一次的延时操作定时器,重新定时。
    • 经典案例:百度输入内容自动搜索
        /**
        *防抖函数
        *@param fn 事件触发的操作
        *@param delay 多少毫秒内连续触发事件,不会执行
        *@returns {Function}
        */
        function debounce(fn,delay){
            let timer = null;
            return function(){
                let self = this,
                    args = arguments;
                timer && clearTimeout(timer);
                timer = setTimeout(function(){
                    fn.apply(self,args);
                },delay);
            } 
        }
        window.onscroll = debounce(function(){
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            console.log(scrollTop)
        },200)
    

      

    节流

    • 定义:触发函数事件后,短时间间隔内无法连续调用,只有上一次函数执行后,过了规定的时间间隔,才能进行下一次的函数调用。
    • 原理:对处理函数进行延时操作,通过设定时间片,控制事件函数间断性的触发。
    • 经典案例:按钮可以多次点击发送请求问题
        /**
        * 节流函数
        * @param fn 事件触发的操作
        * @param mustDelay 间隔多少毫秒需要触发一次事件
        */
        function throttle(fn,mustDelay){
            let timer,
                start = 0;
            return function (){
                let now = new Date().getTime(),
                    self = this,
                    args = arguments;
                if(now > start + mustDelay){
                    fn.apply(self,args)
                    start = now;
                }
            }
        }
        window.onscroll =throttle(function(){
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            console.log(scrollTop)
        },200)
    

      

  • 相关阅读:
    xp sp3下 IIS5.1 配置python 的正确方法
    asp 采集不到数据,采集不成功 拒绝访问 msxml3.dll 错误 '80070005' 的解决方法
    列表样式
    css文本属性
    css背景属性
    常规流练习
    盒模型练习
    定位体系相关练习
    层叠机制的步骤
    简单网页的制作——html
  • 原文地址:https://www.cnblogs.com/xiaojiangk/p/12377745.html
Copyright © 2011-2022 走看看