JavaScript -- 函数节流与函数去抖

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

函数去抖

<!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>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值