一个防抖和节流的实用例子

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

基础版：

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

 

posted on 2019-07-15 16:02  独自去流浪  阅读(1301)  评论(0)    收藏  举报