zoukankan      html  css  js  c++  java
  • js 防抖、节流

    防抖与节流函数是一种最常用的 高频触发优化方式,能对性能有较大的帮助

    1、防抖:将多次高频操作优化为只在最后一次执行,通常使用的场景是:用户输入,只需再输入完成后做一次输入校验即可  防止鼠标多次点击。

    function debounce(fn, wait, immediate) {
        let timer = null
    
        return function() {
            let args = arguments
            let context = this
    
            if (immediate && !timer) {
                fn.apply(context, args)
            }
    
            if (timer) clearTimeout(timer)
            timer = setTimeout(() => {
                fn.apply(context, args)
            }, wait)
        }
    }

    2、节流:每隔一段时间后执行一次,也就是降低频率,将高频操作优化成低频操作,通常使用场景: 滚动条事件 或者 resize 事件,通常每隔 100~500 ms执行一次即可。

    function throttle(fn, wait, immediate) {
        let timer = null
        let callNow = immediate
        
        return function() {
            let context = this,
                args = arguments
    
            if (callNow) {
                fn.apply(context, args)
                callNow = false
            }
    
            if (!timer) {
                timer = setTimeout(() => {
                    fn.apply(context, args)
                    timer = null
                }, wait)
            }
        }
    }

    内容copy自:https://juejin.im/post/5c64d15d6fb9a049d37f9c20#heading-19

  • 相关阅读:
    【排序】题解_P1093奖学金
    简单了解连接服务器的要求
    centos7安装(纯文字版)
    JAVA虚拟机
    集合
    IO流
    反射
    多线程
    JAVA基础
    博客园皮肤文档
  • 原文地址:https://www.cnblogs.com/memphis-f/p/13391801.html
Copyright © 2011-2022 走看看