mousemove 拖拽操作
var count = 0; elem.onmousemove = function(){ count++; // 当计数器为偶数的时候不执行mousemove if( count % 2 === 0 ){ return; } // 实现拖拽功能的代码... };
高频事件的简单处理
var throldHold = 200; //两次scroll事件触发之间最小的事件间隔 window.onscroll = function () { if (arguments.callee.timer) { clearTimeout(arguments.callee.timer); } arguments.callee.timer = setTimeout(isDivScroll, throldHold); } //isDivScroll滚动执行的方法
mousewheel 滚轮操作
window.onmousewheel = throttle(function(){ // 滚轮滚动时的操作代码.. }, 200 );
resize 窗口操作 ie每次比其他浏览是多重复触发一次
window.onresize = throttle(function(){ //普通绑定 // 自适应布局的代码... }, 200 ); window.addEventListener("resize", throttle(function(){ //监听绑定 console.log('重置'); },200),false);
// 立即执行版 function debounce(func, wait) { let timer; return function() { let context = this; // 这边的 this 指向谁? let args = arguments; // arguments中存着e if (timer) clearTimeout(timer); let callNow = !timer; timer = setTimeout(() => { timer = null; }, wait) if (callNow) func.apply(context, args); } }
阿萨
// 合成版 /** * @desc 函数防抖 * @param func 目标函数 * @param wait 延迟执行毫秒数 * @param immediate true - 立即执行, false - 延迟执行 */ function debounce(func, wait, immediate) { let timer; return function() { let context = this, args = arguments; if (timer) clearTimeout(timer); if (immediate) { let callNow = !timer; timer = setTimeout(() => { timer = null; }, wait); if (callNow) func.apply(context, args); } else { timer = setTimeout(() => { func.apply(context, args); }, wait) } } }
参考别的框架的代码 UnderscoreJS 框架
function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; } // 添加resize的回调函数,但是只允许它每300毫秒执行一次 window.addEventListener('resize', debounce(function(event) { // 这里写resize过程 },300));
其他的
hadleClickthrottle(function(text,record,index){ },1000)
const throttle = (fn, wait = 800) => { // 上一次执行 fn 的时间 var previous = 0 // 将 throttle 处理结果当作函数返回 return function(...args) { // 获取当前时间,转换成时间戳,单位毫秒 let now = +new Date() // 将当前时间和上一次执行函数的时间进行对比 // 大于等待时间就把 previous 设置为当前时间并执行函数 fn if (now - previous > wait) { previous = now fn.apply(this, args) } } }
----------------------
function debounce(func, wait, immediate) { var timeout, args, context, timestamp, result; return function() { context = this; args = arguments; timestamp = new Date(); var later = function() { var last = (new Date()) - timestamp; if (last < wait) { timeout = setTimeout(later, wait - last); } else { timeout = null; if (!immediate) result = func.apply(context, args); } }; var callNow = immediate && !timeout; if (!timeout) { timeout = setTimeout(later, wait); } if (callNow) result = func.apply(context, args); return result; }; };
来自elementui
function debounce(fn) { var pending; return function () { if (!pending) { pending = new Promise(function (resolve) { Promise.resolve().then(function () { pending = undefined; resolve(fn()); }); }); } return pending; }; }
使用如下
// not necessary (debounced to run at most once-per-tick) update: debounce(function () { return new Promise(function (resolve) { instance.forceUpdate(); resolve(state); }); }),
------------------------------------------------------------------------------------
阻止mouseover和mouseout的反复触发
function contains(parentNode, childNode) { if (parentNode.contains) { return parentNode != childNode && parentNode.contains(childNode); } else { return !!(parentNode.compareDocumentPosition(childNode) & 16); } } function checkHover(e,target){ if (getEvent(e).type=="mouseover") { return !contains(target,getEvent(e).relatedTarget||getEvent(e).fromElement) && !((getEvent(e).relatedTarget||getEvent(e).fromElement)===target); } else { return !contains(target,getEvent(e).relatedTarget||getEvent(e).toElement) && !((getEvent(e).relatedTarget||getEvent(e).toElement)===target); } } function getEvent(e){ return e||window.event; } document.getElementById("element").addEventListener("mouseover",function(e){ if(checkHover(e,this)){ console.log('鼠标进去一次'); } },false);