首页 > 其他 > 详细

函数节流 函数去抖

时间:2021-05-10 00:36:02      阅读:44      评论:0      收藏:0      [点我收藏+]

节流:函数调用量(函数调用频次)

    <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;、
            if( typeof t === "number" ){
                return false;
            }
            // 每100ms毫秒只能执行一次;
            t = setTimeout( function(){
                t = null;
                jsonp(url,callback,file_name,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;
        }

 

去抖:无论执行多少次,都只关注最后一次,最后一次执行结束之后某段时间,我们再去执行对应的程序

<p>搜索 <input type="text" id="ipt"></p>
    <ul id="search-list">
        <li>你好</li>
    </ul>
    <script>
        var t = null;   
        _("#ipt").oninput = function(){
            clearTimeout(t);
            t = setTimeout(function(){
                var value = this.value;
jsonp(url,callback,file_name,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;
        }
 

 

函数节流 函数去抖

原文:https://www.cnblogs.com/SeventhMeteor/p/14748870.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!