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); 
        } 
    }
    
  • 相关阅读:
    IE8下提示'console'未定义错误
    左右添加和删除
    箭头函数
    事件冒泡
    选中状态改变,并且实现左边选中便便添加
    appcan里面模板的使用
    白面机器学习笔记(一)
    常见的模型加速方法
    相机的参数
    深度学习和机器学习的区别
  • 原文地址:https://www.cnblogs.com/qiuqiubai/p/12652894.html
Copyright © 2011-2022 走看看