js函数节流

使用场景

1.限制多次点击造成的切换错误
2.上传进度
3.mouseover事件
复制代码

节流原理

如果你持续触发事件，每隔一段时间，只执行一次事件。
关于节流的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器。
复制代码

实现思路

被执行的函数通过settimeout延迟一段时间在继续执行，若该函数上次还未执行完成，则忽略本次的请求
复制代码

／*
   节流共用方法：
      fn代表执行函数名
      interval代表延迟时间
*／
var throttle = function(fn, interval) {
    var _self = fn,
        timer,
        firstTime = true;
    return function() {
        var args = arguments,
            _me = this;
        //如果是第一次调用不需要延迟执行
        if (firstTime) {
            _self.apply(_me, args);
            return firstTime = false;
        }
        if (timer) {
            return false;
        }
        timer = setTimeout(function() {
            clearTimeout(timer);
            timer = null;
            _self.apply(_me, args);
        }, interval || 500)
    }
}
复制代码

／*
   节流使用案例：
*／
function changeYzmType(fn,interval,d,i,state){
    clearTimeout(fn.timeoutId);
    fn.timeoutId = setTimeout(function(){
        fn(d,i,state);
    },interval);
}
function changeYzm(d,i,state){
    if(d){
        if($('#changeYzmType').attr('data-style') == 0){
            localStorage.setItem("verType",1);
        }else{
            localStorage.setItem("verType",0);
        }
    }
	if(localStorage.getItem("verType") && localStorage.getItem("verType") ==0){
        $('#changeYzmType').attr('data-style',0).html($.i18n.prop('キャプチャコード認証に切替'));
        if(!state){
            VerCode(i);
        }
	}else{
        $('#changeYzmType').attr('data-style',1).html($.i18n.prop('スライド認証に切替'));
        if(!state){
            VerCode_img(i,1);
        }
	}
}

复制代码

转载于:https://juejin.im/post/5b57de10e51d4534b93f3585