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

    在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。

    一、防抖

            // 防抖:短时间连续触发时,时间期限内函数只执行一次(常用场景:滚动加载)
            /**
             * 1.不立即执行
             * 2.短时间连续触发不执行
            */
            function debounce(func, ms = 1000) {
                let timer;
                return function (...args) {
                    if (timer) {
                        clearTimeout(timer)
                    }
                    // 执行的是最后一次
                    timer = setTimeout(() => {
                        func.apply(this, args)
                    }, ms)
                }
            }
            // 测试
            const task = () => { console.log('run task') }
            const debounceTask = debounce(task, 1000)
            window.addEventListener('scroll', debounceTask)

    二、节流

            // 节流:时间期限内函数只会执行一次(常用场景:防重复点击)
            function throttle(func, ms = 1000) {
                let canRun = true
                return function (...args) {
                    if (!canRun) return
                    canRun = false
                    // 执行的是第一次
                    setTimeout(() => {
                        func.apply(this, args)
                        canRun = true
                    }, ms)
                }
            }
    
            // 测试
            const task = () => { console.log('run task') }
            const throttleTask = throttle(task, 1000)
            window.addEventListener('scroll', throttleTask)
  • 相关阅读:
    Netty实现Unity登录验证(三)
    Netty实现Unity登录验证(二)
    Netty实现Unity登录验证(一)
    Unity RPC 链接
    摄像机跟随物体,修复物体遮挡
    Character Shader 含半透明及受击效果
    空Shader重新指认工具
    Box波浪运动的一种实现
    查找所有有多个 Texture 的 Matrial
    数据生成XML导入Excel
  • 原文地址:https://www.cnblogs.com/jing-zhe/p/14200644.html
Copyright © 2011-2022 走看看