网站怎样设计网址,手机网站app制作,产品招商网,如何在搜索中找到自己做的网站1. 防抖#xff1a; 由于dom操作极其昂贵#xff0c;所以尝试过多的dom操作有可能会将浏览器搞崩溃#xff0c;比如onresize、onscroll这类事件操作#xff1b;为了解决这个问题#xff0c;引出防抖的概念#xff08;某些代码不可以在没有间断的情况下连续重复执行#… 1. 防抖 由于dom操作极其昂贵所以尝试过多的dom操作有可能会将浏览器搞崩溃比如onresize、onscroll这类事件操作为了解决这个问题引出防抖的概念某些代码不可以在没有间断的情况下连续重复执行方案第一次调用函数创建一个定时器在指定时间之后执行代码在第二次调用时清除掉前一次的定时器并重新设置一个这种方案下如果第一个定时器已经执行这个操作就没意义如果第一个没执行则将其替换为新的定时器目的是只有在执行函数的请求停止一段时间后才执行适用于代码是周期执行的但是你不能控制请求执行的速率函数防抖让一个函数只有在你不断触发后停下来歇会才开始执行中间你操作得太快它直接无视。 // 函数防抖
function debounce(method, context) {clearTimeout(method.tid); // mthod是真实要执行的函数context是执行的作用域默认windowmethod.tid setTimeout(function() {method.call(context) // 确保方法在适当的环境中执行}, 100);
}// onscroll时函数防抖
function scrollFun() {var marginBot 0;if (document.documentElement) {marginBot document.documentElement.scrollHeight - (document.documentElement.scrollTopdocument.body.scrollTop) - document.documentElement.clientHeight;} else {marginBot document.body.scrollHeight - document.body.scrollTop - document.body.clientHeight;}if(marginBot 0) {// 滚动到底部加载数据操作}
}
window.onscroll function() {debounce(scrollFun);
} 2. 节流 如果我们不希望每次都是要事件结束后等待延迟时间后执行回调 我们可以先给定一个时间段duration过了这个时间段以后我们执行相应的操作如果没有过这个时间段那么就按照函数节流的思路开关定时器就ok。 function throttle(method, delay, duration){var timer null, stime new Date(); // 记录下开始执行函数的时间return function() {var context this, args arguments,ctime new Date(); // 记录下当前时间clearTimeout(timer); // 函数节流里的思路// 记录下的两个时间相减再与duration进行比较if (ctime - stime duration) {method.apply(context, args);stime ctime;}}
}window.onresize throttle(method, 50, 100);
// 50ms的间隔内连续触发的调用后一个调用会把前一个调用的等待处理掉但每隔100ms至少执行一次 3. 滚动实例区分下 normal滚动会立即触发事件执行 throttle 延迟100ms直到100ms以内没有事件触发之后执行这样如果一直在操作有可能一直不会触发事件发生 debounce50ms的间隔内连续触发的调用后一个调用会把前一个调用的等待处理掉但每隔100ms至少执行一次。 4. 滚动到目标节点 获取目标节点偏移量var len $(target).offset().top或document.querySelector(target).offsetTop滚动$(body).animate(scrollTop: len)或document.querySelector(body).scrollTop len转载于:https://www.cnblogs.com/colima/p/7163057.html
