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

    目的

    事件处理函数A, 节流/防抖函数B
    目的是:

    • 优化用户体验(适时反馈,避免UI渲染阻塞,浏览器卡顿)
    • 提升页面性能(避免页面渲染卡顿,减少服务器压力,防范恶意触发)

    用在页面中连续触发的事件处理上:如scroll, resize窗口大小改变, input表单验证,click点击,mouseover鼠标滑动等等。

    节流函数和防抖函数都是执行B(A)返回的内部函数(闭包)

    节流

    定义

    对于持续的事件触发,每达到固定时间间隔,执行一次事件处理函数A
    比如连续1s点击很多次按键时,固定每0.5s触发一次处理函数,就只会触发2次。
    节流函数举例:

    function throttle(fn, delay){
        var last=0;
        return function(){
            var now=Date.now();
            if (now - last >= delay) { 
                fn.apply(this, arguments); 
                last = now; 
            }
        };
    }
    

    节流可以提高性能,提高安全性。

    防抖

    定义

    事件触发停止后开始计时,在固定时间内不再有事件触发,执行事件处理函数A。
    事件连续触发时不执行函数,触发停止后,某个时间段以后再执行。
    例如表单输入事件,等待表单输入结束再执行函数

    function debounce(fn, delay) {
        var timer; 
        return function() { 
            console.log('事件触发'); 
            var self = this, 
                argumentsBySelf = arguments; 
            clearTimeout(timer); //清除上次的定时器,fn 就没有被调用。
            timer = setTimeout(function() {     //设定新的定时器
                fn.apply(self, argumentsBySelf); 
            }, delay); 
        } 
    }
    
  • 相关阅读:
    jwt
    mybatis的回顾
    swagger
    MySQl总结
    Java异常
    常用Dos命令
    C++初级项目——机房预约系统
    C++中将数字型字符串转变为int类型的方法
    C++中int *a; int &a; int & *a; int * &a
    #define_CRT_SECURE_NO_WARNINGS的用法
  • 原文地址:https://www.cnblogs.com/qiuqiubai/p/12652894.html
Copyright © 2011-2022 走看看