js节流函数和js防止重复提交的N种方法

前端开发 作者: 2024-08-21 05:05:01
应用情景 经典使用情景:js的一些事件,比如:onresize、scroll、mousemove、mousehover等; 还比如:手抖、手误、服务器没有响应之前的重复点击; 这些都是没有意义的,重复

应用情景

节流函数

方法汇总

具体实现

/**
 * 闭包节流函数方法(可传参数)
 * @param Function fn 延时调用函数
 * @param Number delay 延迟多长时间
 * @return Function 延迟执行的方法
 */
var throttle = function (fn,delay) {
    var timer = null;
    return  () {
        var args = arguments; //参数集合
        clearTimeout(timer);
        timer = setTimeout( () {
            fn.apply(this,args);
        },delay);
    }
}

*
 * 要执行的方法
 * @param String name 传递的参数
  postFun(name) {
    document.writeln("名字:" + name);
}

================测试部分 => 【1s重复点击10次】
var t = throttle(postFun,1000);
var ejector = setInterval(() => {
    t("tiger");
},100);

setTimeout(() => {
    clearInterval(ejector);
},1000);
*
 * 普通节流函数方法
 * @param Function fn 延时调用函数
 * @param Number delay 延迟多长时间
  throttle(fn,1)">if (fn._id) {
        clearTimeout(fn._id);
    }
    fn._id = window.setTimeout(() => {
        fn();
        fn._id = ;
    },delay);
}

*
 * 要执行的方法
  postFun() {
    document.writeln(new Date().getTime());
}

var interval = setInterval(() => {
    throttle(postFun,1000 {
    clearInterval(interval);
},1000);
var lock = false;
jQuery("#submit").on('click', () {
     (lock) {
        ;
    }
   lock = true; jQuery.post(url,data,
(response) { TODO:业务代码 lock = ; }); });

 

总结

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65912.html