JavaScript -- 函数节流与函数去抖_utils.js 函数节流-CSDN博客

本文链接：https://blog.csdn.net/yu3278326/article/details/105183156

函数节流与函数去抖大幅度的减少计算机运行的资源

函数去抖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>搜索 <input type="text" id="ipt"></p>
    <ul id="search-list">
        <li>你好</li>
    </ul>

    <script src="./utils.js"></script>
    <script>
        // 现在咱家没钱，啥时候有钱啥时候吃;
        
        // 无论执行多少次，我都只关注最后一次,最后一次执行结束之后100ms ,我们再去执行对应的程序;
        var t = null;   
        _("#ipt").oninput = function(){
            clearTimeout(t);
            t = setTimeout(function(){
                var value = this.value;
                // 每100ms毫秒只能执行一次;
                var data = {
                    wd : value
                }
                // console.log("重要程序");
                jsonp("https://www.baidu.com/sugrec" , function(res){
                    renderSearch(res);
                } , "cb" , assign({
                    prod : "pc",
                    sugsid : "1423,31169,21125,30839,31187,30823,22159",
                }, data));
            }.bind(this),500)
        }
        
        function renderSearch(res){
            var search_list = res.g;
            var html = "";
            if( search_list === undefined ){
                return  _("#search-list").innerHTML = html;
            }
            search_list.forEach( function( item ){
                html += "<li>"+ item.q +"</li>"
            })
            _("#search-list").innerHTML = html;
        }

        

    </script>
</body>
</html>

函数节流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>搜索 <input type="text" id="ipt"></p>
    <ul id="search-list">
        <li>你好</li>
    </ul>
    <script src="./utils.js"></script>
    <script>
        //函数节流
        var t = null;
        _("#ipt").oninput = function(){
            var value = this.value;
            // console.log(value);
            if( typeof t === "number" ){
                return false;
            }
            // 每100ms毫秒只能执行一次;
            var data = {
                wd : value
            }
            t = setTimeout( function(){
                t = null;
                jsonp("https://www.baidu.com/sugrec" , function(res){
                    renderSearch(res);
                } , "cb" , assign({
                    prod : "pc",
                    sugsid : "1423,31169,21125,30839,31187,30823,22159",
                }, data));
            } , 100)
        }
        function renderSearch(res){
            var search_list = res.g;
            var html = "";
            if( search_list === undefined ){
                return  _("#search-list").innerHTML = html;
            }
            search_list.forEach( function( item ){
                html += "<li>"+ item.q +"</li>"
            })
            _("#search-list").innerHTML = html;
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 函数节流
        function throttle( callback , delay ){
            delay = delay || 100;
        
        // 返回一个新函数，新函数英语回调函数的电泳
        var t = null;
        return function(){
            if( typeof t === "number" ){
                return false;
            }
            //需要外部函数的参数
            //类似于bind的封装
            var _arguments = arguments;
            t = setTimeout( function(){
                t = null;
                callback.apply( false , _arguments );
            } , delay )
        }
    }

    function shaking( callback , delay ){
        delay = delay || 100;
        // 返回一个新函数，新函数用于回调函数的调用
        var t = null;
        return function(){
            clearTimeout(t);
            //需要外部函数的参数
            //类似于 bind 的封装
            var _arguments = arguments;
            t = setTimeout(function(){
                t = null;
                callback.apply( false , _arguments );
            } , delay )
        }
    }
    // 函数节流
    // var handerMove = throttle(function( e ){
    //     console.log( e );
    // })
    // 函数去抖
    // var handerMove = shaking(function( e ){
    //     console.log( e );
    // })
    //运行函数
    document.onmousemove = handerMove;
    </script>
</body>
</html>