专栏首页王磊的博客js节流函数和js防止重复提交的N种方法

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

应用情景

经典使用情景:js的一些事件,比如:onresize、scroll、mousemove、mousehover等;

还比如:手抖、手误、服务器没有响应之前的重复点击;

这些都是没有意义的,重复的无效的操作,设置对整个系统的影响还可能是致命的,所以我们要对重复点击的事件进行相应的处理!

节流函数

所谓的节流函数顾名思义,就是某个时刻限制函数的重复调用。

同样节流函数也是为了解决函数重复提交的问题,而防止重复提交的方法,不止节流函数一种实现。

方法汇总

本文整理了我在工作实践当中,觉的防止js重复提交,比较好用的方法,在这里和大家分享一下。

一、setTimeout + clearTimeout(节流函数)

  本文提供两种实现方式:普通节流函数和闭包节流函数

二、设定flag/js加锁

三、通过disable

四、添加浮层比如loading图层防止多次点击

具体实现

一、setTimeout + clearTimeout(节流函数)

方式一:闭包节流函数(可传递多个参数)

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

/**
 * 要执行的方法
 * @param String name 传递的参数
 */
function 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 延迟多长时间
 */
function throttle(fn, delay) {
    if (fn._id) {
        clearTimeout(fn._id);
    }
    fn._id = window.setTimeout(() => {
        fn();
        fn._id = null;
    }, delay);
}

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

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

setTimeout(() => {
    clearInterval(interval);
}, 1000);

执行结果:

二、设定flag/js加锁

var lock = false;
jQuery("#submit").on('click', function () {
    if (lock) {
        return false;
    }
    jQuery.post(url, data, function (response) {
        //TODO:业务代码
        lock = false;
    });
});

总结

前两种方式实现起来比较方便,而后两种实现起来相对比较繁琐,如果是为了防止事件的多次触发,建议使用闭包,如果是表单提交,适度使用后两种比较稳妥。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    Java中文社群_老王
  • 苹果系统使用之输入法的呈现与设置问题

        新装的系统,总是纠结的出现各种问题。今天解决的就是装了Mac OS X 10.6(苹果系统)之后,输入法找不到,用快捷不能设置的问题。 刚开始...

    Java中文社群_老王
  • JavaScript禁用页面刷新

    JavaScript禁用页面刷新代码如下: //禁用F5刷新 document.onkeydown = function () { if (event....

    Java中文社群_老王
  • js节流函数和js防止重复提交的N种方法

    Java中文社群_老王
  • Babel下的ES6兼容性与规范

    ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问题,但大...

    IMWeb前端团队
  • Babel下的ES6兼容性与规范

    ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问题,但大...

    IMWeb前端团队
  • PHP设计模式之迭代器模式

    一说到这个模式,就不得不提循环语句。在《大话设计模式》中,作者说道这个模式现在的学习意义更大于实际意义,这是为什么呢?当然就是被foreach这货给整得。任何语...

    硬核项目经理
  • [javaSE] 集合框架(迭代器)

    当我们创建一个集合以后,可以直接使用system.out.println()来打印这个集合,但是,我们需要可以对每个元素进行操作,所以,这里需要使用迭代器来遍历...

    陶士涵
  • javascript设计模式八:职责链模式

    职责链的定义:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象能处理它为止,...

    前端_AWhile
  • Html|Vue实战小项目-购物车

    在很多电商网站中,都有一个非常重要的功能,那就是购物车。接下来将使用Vue.js实现一个简易的购物车项目。实现的功能有全选或选择部分商品、计算总价、对商品数量进...

    算法与编程之美

扫码关注云+社区

领取腾讯云代金券