zoukankan      html  css  js  c++  java
  • 一个防抖和节流的实用例子

    例子描述:实时显示输入框的内容

    基础版:

    html页面代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="utils.js"></script>
        <script>
            $(function(){
                $('#ipt').on('keyup', throttle(function(){
                    $('#text').text($(this).val());
                }, 500))
            })
        </script>
    </head>
    <body>
        <input id="ipt" type="text" placeholder="请输入...">
        <p id="text"></p>
    </body>
    </html> 

     

    把throttle替换成debounce试试防抖效果。

    utils.js

    // 防抖函数
    function debounce(fn) {
        let timeout = null;
        return function () {
            clearTimeout(timeout);
            timeout = setTimeout(() => {
                fn.call(this, arguments);
            }, 1000);
        }
    }
    
    // 节流函数
    function throttle (fn, delay) {
        var prev = Date.now();
        return function () {
            var args = arguments;
            var now = Date.now();
            if (now - prev >= delay) {
                fn.apply(this, args);
                prev = Date.now();
            }
        }
    }
    

    在这个例子中,节流会比防抖效果更好一些。

    另一个例子:一个Vue表单提交防抖的实用例子

  • 相关阅读:
    日常巡检
    mysql 主从
    tomcat +apache 动静分离
    ELK安装
    LVS-NAT模式
    shell 三剑客
    shell $传参
    zabbix安装
    lvs-DR 负载均衡
    解决ubuntu中pycharm的图标没有问题
  • 原文地址:https://www.cnblogs.com/cathy1024/p/11189449.html
Copyright © 2011-2022 走看看