摘要:有一些事件是会频繁触发的,比如如果在这些事件上绑定函数,并且这些函数要进行耗性能的计算,那么会导致页面忽急忽缓,反应迟钝这时就需要使用节流事件来控制函数被触发的频率。
有一些事件是会频繁触发的,比如scroll resize mousemove keyup
如果在这些事件上绑定函数,并且这些函数要进行耗性能的计算,那么会导致页面忽急忽缓,反应迟钝,这时就需要使用节流事件来控制函数被触发的频率。
function handler() { // 处理一些耗性能的计算 // 或者发送ajax请求 console.log("2333"); } $(window).scroll(handler); // 反复触发handler,影响性能方法一 setTimeout
var timer = 0; $(window).scroll(function() { if (!timer) { timer = setTimeout(function() { handler(); timer = 0; }, 1000); } });方法二 setInterval
// scroll虽然绑定了一个会频繁触发的函数,但是该函数只是改变scrolled的值,不会影响性能 var scrolled = false; $(window).on("scroll", function() { scrolled = true; }); setInterval(function() { if (scrolled) { handler(); scrolled = false; } }, 1000);
想象一个场景:实时搜索
在输入框输入关键词后就要马上显示结果,通常做法是在keyup上绑定handler处理函数,发送ajax请求。但是如果用户输入速度很快,那么keyup会触发多次,发送多个ajax请求,而我们只是想要在用户停止输入的时间超过1s后才发送ajax
这和前面的scroll事件又有些不同,在这里我只想handler函数在keyup触发后执行一次
前面两种方法只是减少了handler()触发的频率,但是仍然会触发多次
var searchTimeout = null; $("#input").on("keyup", function(event) { //每次keyup时直接取消上次计时器,只有当keyup超过1s时才执行handler clearTimeout(searchTimeout); searchTimeout = setTimeout(function() { handler(); }, 1000); });
参考:《jQuery基础教程》
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/80808.html
摘要:文件为函数要传入的参数返回事件处理函数添加事件监听节流函数一般用于事件的情况较多,因为这些事件的触发是连续性的,需要在一个时间间隔内只触发一次。 showImg(https://segmentfault.com/img/remote/1460000018998747); 阅读原文 前言 在前端开发当中我们经常会绑定一些事件触发的某些程序执行,有时这些事件会连续触发,如浏览器窗口 s...
摘要:此时需要采用防抖和节流的方式来减少调用频率,同时不影响原来效果。函数防抖当持续触发事件时,一段时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前就触发了事件,延时重新开始。 js 防抖 节流 JavaScript 实际工作中,通过监听某些事件,如scroll事件检测滚动位置,根据滚动位置显示返回顶部按钮;如resize事件,对某些自适应页面调整DOM的渲染;如ke...
摘要:为什么需要函数防抖和函数节流在浏览器中某些计算和处理要比其他的昂贵很多。函数防抖如果一个事件被频繁触发多次,并且触发的时间间隔过短,则防抖函数可以使得对应的事件处理函数只执行最后触发的一次。函数防抖可以把多个顺序的调用合并成一次。 1.为什么需要函数防抖和函数节流? 在浏览器中某些计算和处理要比其他的昂贵很多。例如DOM操作比起非DOM交互需要更多的内存和CPU占用时间。连续尝试进行...
摘要:防抖和节流连续触发触发频率很高的时间,不进行优化,会出现页面卡顿现象。节流防抖是多次触发事件,目标函数只执行一次,不管触发这些事件用了多少时间。 防抖(debounce)和节流(throttle) 连续触发(触发频率很高)的时间,不进行优化,会出现页面卡顿现象。常见的需要优化的事件: 鼠标事件: mousemove(拖拽) mouseover(划过) mouseWheel(滚屏)...
阅读 3619·2021-09-22 15:15
阅读 3506·2021-08-12 13:24
阅读 1292·2019-08-30 15:53
阅读 1797·2019-08-30 15:43
阅读 1153·2019-08-29 17:04
阅读 2777·2019-08-29 15:08
阅读 1551·2019-08-29 13:13
阅读 3058·2019-08-29 11:06