非商用,仅是自己没事干结合网上百度的封装玩,也没怎么写过博客论坛,如有侵权,留言会删,谢谢
通过在jquery基础上开发
(function(W, $) {
//插件
$.fn.extend({
xx: function() {
console.log(1)
}
});
//方法
W.common = {
//防抖 n秒内高频率事件触发只执行一次 每次点击重新计时 例:delay=1000;在连续点击时,不管点击多少次,在你停止点击 等待1秒后执行一次,再次连续点击(间断性) delay默认值1000
debounce: function(fn, delay) {
var timer = null;
delay=delay || 1000;
return function(e) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments)
}, delay)
}
},
//节流 n秒内高频率事件触发执行一次(延迟执行),n秒后的点击会再次触发 例:delay=1;在连续点击时,(不停止)每次点击延迟一秒执行,(持续性) delay默认值1000
throttle: function(fn, delay) {
var canRun = true;
delay=delay || 1000;
return function() {
if(!canRun) return;
canRun = false;
setTimeout(() => {
fn.apply(this, arguments);
canRun = true;
}, delay)
}
}
}
})(window, jQuery)
common.js
你自己的js部分
$(function(){
//document.addEventListener("click",common.debounce(guan,1000))
$("#addList").on("click",common.debounce(debounce,600));
$("#addList").on("click",common.throttle(throttle,600));
//$("#addList").xx();
function debounce(){
console.log("防抖:",Math.random())
}
function throttle(){
console.log("节流:",Math.random())
}
})
test.js
先引入jq任意版本,在引入common.js,最后引入你自己的js,此博客引入的为test.js
<button id="addList">测试</button>
test.html
测试结果如上图↑↑↑
本人头脑简单,语言组织能力差,所以有些注释可能说的绕口或者很难理解,甚至也存在错误,敬请谅解