防抖节流

<input type="text" id="inp"/>
<script>
    var oInp = document.getElementById('inp')
    function ajax(){
        console.log(this.value)
    }
    oInp.oninput = ajax
</script>

------------------------

防抖

<input type="text" id="inp"/>
<script>
    var oInp = document.getElementById('inp')
    var timer = null
    function ajax(){
        console.log(this.value)
    }
    oInp.oninput = function(){
        clearTimeout(timer);
        timer = setTimeout(function(){
            ajax();
        },1000)
    }
</script>

-----------------------

防抖

<input type="text" id="inp"/>
<script>
    var oInp = document.getElementById('inp')
    var timer = null
    function ajax(){
        console.log(this.value)
    }
    oInp.oninput = function(){
        var _self = this
        clearTimeout(timer);
        timer = setTimeout(function(){
            ajax.apply(_self);
        },1000)
    }
</script>

-----------------------

事件对象

<input type="text" id="inp"/>
<script>
    var oInp = document.getElementById('inp')
    var timer = null
    function ajax(e){
        console.log(e,this.value)
    }
    oInp.oninput = ajax
    // function(){
    //     var _self = this
    //     clearTimeout(timer);
    //     timer = setTimeout(function(){
    //         ajax.apply(_self);
    //     },1000)
    // }
</script>

arguments

<input type="text" id="inp"/>
<script>
    var oInp = document.getElementById('inp')
    var timer = null
    function ajax(e){
        console.log(e,this.value)
    }
    oInp.oninput = function(e){
        var _self = this
        clearTimeout(timer);
        timer = setTimeout(function(){
            ajax.apply(_self);
        },1000)
    }
</script>

--------
 

<input type="text" id="inp"/>
<script>
    var oInp = document.getElementById('inp')
    var timer = null
    function ajax(e){
        console.log(e,this.value)
    }
    oInp.oninput = function(e){
        var _self = this,_arg=arguments
        clearTimeout(timer);
        timer = setTimeout(function(){
            ajax.apply(_self,_arg);
        },1000)
    }
</script>

----------

<input type="text" id="inp"/>
<script>
    var oInp = document.getElementById('inp')
    var timer = null
    function debounce(handler,delay){
        var timer = null;
        return function(){
            var _self = this,_arg=arguments
            clearTimeout(timer);
            timer = setTimeout(function(){
                handler.apply(_self,_arg);
            },delay)
        } 
    }
    function ajax(e){
        console.log(e,this.value)
    }
    oInp.oninput = debounce(ajax,1000)
</script>

节流

<div id="show">0</div>
<button id="btn">click</button>
<script>
    var oDiv = document.getElementById('show')
    var oBtn = document.getElementById('btn')
    // 1 1000 1200
    function throttle(handler,wait){
        var lastTime = 0;
        return function(e){
            var nowTime = new Date().getTime()
            if(nowTime - lastTime > wait){
                handler()
                lastTime = nowTime;
            }
        }
    }
    function buy(e){
        console.log(this,e)
        oDiv.innerText = parseInt(oDiv.innerText) + 1;
    }
    oBtn.onclick = throttle(buy,500);
</script>

<div id="show">0</div>
<button id="btn">click</button>
<script>
var oDiv = document.getElementById('show')
var oBtn = document.getElementById('btn')
// 1 1000 1200
function throttle(handler,wait){
    var lastTime = 0;
    return function(e){
        var nowTime = new Date().getTime()
        if(nowTime - lastTime > wait){
            handler.apply(this,arguments)
            lastTime = nowTime;
        }
    }
}
function buy(e){
    console.log(this,e)
    oDiv.innerText = parseInt(oDiv.innerText) + 1;
}
oBtn.onclick = throttle(buy,500);
</script>

 

转载于:https://my.oschina.net/u/2408700/blog/3024312