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表单提交防抖的实用例子

  • 相关阅读:
    mybatis+sql语句
    坐标转换
    sql语句含中文JDBC查询不到
    架构阅读笔记16
    架构阅读笔记15
    架构阅读笔记14
    windows安装imgaug包报错中Shapely
    java除法
    Java输入输出问题复习
    java自学,基础,入门
  • 原文地址:https://www.cnblogs.com/cathy1024/p/11189449.html
Copyright © 2011-2022 走看看