JavaScript的防抖和节流案例
更新时间：2021年06月25日 11:09:38 作者：zhi698999y
这篇文章介绍了JavaScript的防抖和节流案例的代码实现和概念.包含详细的代码,希望对你有所帮助
防抖：在一定的时间内只执行最后一次任务；
节流：一定的时间内只执行一次；
防抖
<button id="debounce">点我防抖！</button>
$('#debounce').on('click', debounce());
function debounce() {
let timer;
// 闭包
return function () {
clearTimeout(timer);
timer = setTimeout(() => {
// 需要防抖的操作...
console.log("防抖成功！");
}, 500);
}
}
节流：
<button id="throttle">点我节流！</button>
$('#throttle').on('click', throttle());
function throttle(fn) {
let flag = true;
// 闭包
return function () {
if (!flag) {
return;
}
flag = false;
setTimeout(() => {
console.log("节流成功！");
flag = true;
}, 1000);
};
}
到此这篇关于JavaScript的防抖和节流案例的文章就介绍到这了,更多相关JavaScript防抖和节流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()第一个参数的值，当然这是绑定哦，不是像call、apply一样直接执行，apply要执行的话还得自己调用2022-12-12
这篇文章主要为大家详细介绍了微信小程序实现表单验证源码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
基于JavaScript FileReader上传图片显示本地链接
这篇文章主要为大家详细介绍了基于JavaScript FileReader上传图片显示本地链接的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
关于javascript随机数的，很早以前的文章了，不过内容还是不错的，如果想要更多的效果，可以去脚本之家搜下。2009-12-12
这篇文章主要介绍了js获取会话框prompt的返回值的方法,通过一个简单的密码判断实例分析了js获取会话框prompt返回值的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了javascript实现点击小图显示大图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
关于js获取flash对象，网上有非常多的例子，但不是我想要的，经测试整理，因此本文诞生了2014-04-04
javascript模版引擎-tmpl的bug修复与性能优化分析
在平时编码中，经常要做拼接字符串的工作，如把json数据用HTML展示出来，以往字符串拼接与逻辑混在在一起会让代码晦涩不堪，加大了多人协作与维护的成本。而采用前端模板机制就能很好的解决这个问题2011-10-10
浅谈typescript中keyof与typeof操作符用法
本文主要介绍了typescript中keyof与typeof操作符用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章为大家整理了13个PHP函数超实用，函数是PHP如此强大的源泉，但是很多PHP函数并没有得到充分的利用，本文的13个PHP函数大家一定要真正掌握。2015-10-10
最新评论