zoukankan      html  css  js  c++  java
  • JavaScript实战笔记(一) 防抖与节流函数

    对于某些 高频触发 的事件,如果事件处理函数的调用频率没有限制的话,那么将会大大加重浏览器的负担

    这时我们可以采用防抖函数或节流函数,减少事件处理函数的调用频率,同时保证不会影响用户体验

    1、防抖函数

    (1)描述

    在触发事件 n 秒后,才会执行事件处理函数,如果 n 秒内再次触发,那么重新计时

    (2)实现

    function debounce(handler, delay) {
        var timer = null
        return function () {
            var that = this
            var args = arguments
            if (timer) clearTimeout(timer)
            timer = setTimeout(function() { handler.apply(that, args) }, delay)
        }
    }
    

    (3)测试

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Debounce</title>
        <script>
            function debounce(handler, delay) { // 防抖函数
                var timer = null
                return function () {
                    var that = this
                    var args = arguments
                    if (timer) clearTimeout(timer)
                    timer = setTimeout(function() { handler.apply(that, args) }, delay)
                }
            }
            function show() { // 代理 log 方法
                console.log.apply(console, arguments)
            }
            let debounce_show = debounce(show, 1000)
        </script>
    </head>
    <body>
        <button onclick="debounce_show('Hello', 'World')">Debounce</button>
    </body>
    </html>
    

    2、节流函数

    (1)描述

    防抖函数有一个问题,假如这个事件一直触发,那么这个事件的处理函数将永远无法执行

    而使用节流函数可以解决这个问题,当持续触发事件时,节流函数可以保证一定时间内调用一次处理函数

    (2)实现

    function throttle(handler, waitTime) {
        var timer = null
        var lastTime = Date.now()
        return function () {
            var that = this
            var args = arguments
            var currTime = Date.now()
            var remaining = waitTime - (currTime - lastTime)
            if (timer) clearTimeout(timer)
            if (remaining <= 0) {
                handler.apply(that, args)
                lastTime = Date.now()
            } else {
                timer = setTimeout(function() { handler.apply(that, args) }, waitTime)
            }
        }
    }
    

    (3)测试

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Debounce</title>
        <script>
            function throttle(handler, waitTime) { // 节流函数
                var timer = null
                var lastTime = Date.now()
                return function () {
                    var that = this
                    var args = arguments
                    var currTime = Date.now()
                    var remaining = waitTime - (currTime - lastTime)
                    if (timer) clearTimeout(timer)
                    if (remaining <= 0) {
                        handler.apply(that, args)
                        lastTime = Date.now()
                    } else {
                        timer = setTimeout(function() { handler.apply(that, args) }, waitTime)
                    }
                }
            }
            function show() { // 代理 log 方法
                console.log.apply(console, arguments)
            }
            let throttle_show = throttle(show, 1000)
        </script>
    </head>
    <body>
        <button onclick="throttle_show('Hello', 'World')">Throttle</button>
    </body>
    </html>
    

    【 阅读更多 JavaScript 系列文章,请看 JavaScript学习笔记

    版权声明:本博客属于个人维护博客,未经博主允许不得转载其中文章。
  • 相关阅读:
    go语言从例子开始之Example22.协程之通道
    go语言从例子开始之Example21.协程
    go语言从例子开始之Example20.错误处理
    go语言从例子开始之Example19.接口
    级联复制改成主从复制
    一主二从改成级联复制架构步骤
    mysql8.0 备分常用命令
    mysql8基于gtid导出导入搭建主从
    MySQL 8.0 配置mysql_native_password身份验证插件的密码
    mysql_config_editor 安全登录方式
  • 原文地址:https://www.cnblogs.com/wsmrzx/p/12206245.html
Copyright © 2011-2022 走看看