js节流与防抖,防止重复提交、防止频繁重复点击

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/web_xyk/article/details/80165824

一、节流、防止短时间多次提交操作

现有一提交按钮<button id="submit">提交</button>点击后提交表单信息。

但是经常会出现: 1.不小心点了多次,就提交了多次

                              2.网络卡顿的时候网页没反应,用户频繁点击的情况

// 即这种写法:
var subBtn = document.getElementById('submit');
subBtn.addEventListener('click', ajaxForm, false)

// 提交方法
function ajaxForm(e) {
    console.log(e.target)
    console.log('执行提交操作', new Date().getTime())
}

通过添加节流函数来解决

/*节流函数,通过控制每次事件执行的时间间隔控制短时间多次执行方法

handler:要执行的方法

wait:每次点击事件执行的时间间隔(毫秒)

*/

function throttle(handler, wait) {

    var lastTime = 0;

    return function () {
    
        var nowTime = new Date().getTime();

        if (nowTime - lastTime > wait) {
            handler.apply(this, arguments);
            lastTime = nowTime;
        }

    }
}

// 提交方法
function ajaxForm(e) {
    console.log(e.target)
    console.log('执行提交操作', new Date().getTime())
}

var subBtn = document.getElementById('submit');
subBtn.addEventListener('click', throttle(ajaxForm, 1000), false)

二、防抖动 

 

 应用场景:模糊查询,根据输入内容提示相关完整内容 (浏览器必备功能)

<input id="search" type="text" placeholder="请输入要查询的内容">

不好的写法:

function showAll(e) {
    console.log(e.target)
    console.log('执行查询操作', new Date().getTime())
}

var searchInput = document.getElementById('search');
searchInput.addEventListener('keyup', showAll, false)

例:查询 ESP(我们并不想查询E或者ES),会执行三次,无论输入多快

通过添加防抖函数来优化查询体验

/*防抖函数,通过推迟每次事件执行的时间来减少不必要的查询

handler:要执行的方法

delay:每次事件执行的推迟时间(毫秒)

*/

function debounce(handler, delay) {
    var timer;

    return function () {
        var self = this, arg = arguments;

        clearTimeout(timer);

        timer = setTimeout(function () {
            handler.apply(self, arg)
        }, delay)
    }
}

function showAll(e) {
    console.log(e.target)
    console.log('执行查询操作', new Date().getTime())
}

var searchInput = document.getElementById('search');
searchInput.addEventListener('keyup', debounce(showAll, 500), false)

查询 ESP,输入较快的情况只会执行一次查询ESP

 

 

    

展开阅读全文

没有更多推荐了,返回首页