JavaScript 函数循环、延时、节流、防抖

函数循环(setInterval)

间隔指定的毫秒数不停地执行指定的代码

<button onclick="myStartFunction()">开始</button>
<button onclick="myStopFunction()">停止</button><script>
var myVar =  null; //全局function myTimer(){var d=new Date();var t=d.toLocaleTimeString();document.getElementById("demo").innerHTML=t;
}function  myStart() {setInterval(function(){myTimer()},1000); // 开始执行
}function myStopFunction(){clearInterval(myVar); // 停止执行
}
</script>

函数延时(setTimeout)

在指定的毫秒数后执行指定代码

var myVar = null; //全局function myFunction()
{myVar=setTimeout(function(){alert("Hello")},3000);
}function myStopFunction()
{clearTimeout(myVar); //停止执行
}

函数节流(throttle)

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

<button onclick="myFunction()">点击</button>
<script>
// 节流函数
function throttle(fun, delay) {let last, deferTimerreturn function (args) {let that = thislet _args = argumentslet now = +new Date()if (last && now < last + delay) {clearTimeout(deferTimer)deferTimer = setTimeout(function () {last = nowfun.apply(that, _args)}, delay)}else {last = nowfun.apply(that,_args)}}
}function myFunction() {throttle(() => {...}, 1000)
}
</script>

高程中的经典代码：
function throttle(method, context) {clearTimeout(method.tId);method.tId = setTimeout(function () {method.call(context);}, 100)}

应用场景:
1）鼠标不断点击触发，mousedown(单位时间内只触发一次)
2）监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断
3）视频播放节点上报

函数防抖(debounce)

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

function debounce(fun, delay) {return function (args) {let that = thislet _args = argsclearTimeout(fun.id)fun.id = setTimeout(function () {fun.call(that, _args)}, delay)}
}debounce(ajax, 500)

应用场景:

search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

JavaScript 函数循环、延时、节流、防抖相关推荐

用javascript函数设置延时执行jQuery
JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似. setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function ...
JavaScript 函数节流 throttle 和防抖 debounce
今天和别人聊到JavaScript函数的节流和防抖,发现自己对这两个的区别很是模糊,遂小小实践一下,在此记录,希望对需要的人有所帮助. 节流 - 频繁操作,间隔一定时间去做一件事举例说明:假定时间间 ...
JavaScript函数节流和函数防抖
1.为什么需要函数防抖和函数节流? 在浏览器中某些计算和处理要比其他的昂贵很多.例如DOM操作比起非DOM交互需要更多的内存和CPU占用时间.连续尝试进行过多的DOM操作可能会导致浏览器挂起,甚至崩溃 ...
JavaScript循环延时
JavaScript循环延时 1.setTimeout 2. For 循环加 setTimeout 3. 镶嵌使用 setTimeout 1.setTimeout setTimeout 使用结构:se ...
c语言随机数循环延迟,C语言生成随机数的函数、延时函数
该楼层疑似违规已被系统折叠隐藏此楼查看此楼下面C语言代码使用了生成随机数的函数.延时函数.请大家仔细观察其显示效果. 从以下代码,我们可以得出一个重要的结论:当上述两类函数被放入循环时,应作出一定 ...
筱筱看博客（函数柯里化、节流防抖）
今日分享内容 1.颗粒化: 把固定的东西我们可以使用颗粒化单个传值的方式,以实现像继承的这种东西. // 颗粒化function skin(skin) {return function (countr ...
JavaScript函数防抖与截流
一.在前端开发当中,有些交互事件,会频繁触发.这样会导致我们的页面渲染性能,如果频繁触发接口调用的话,会直接导致服务器性能的浪费. 例如:键盘事件 keyup作为测试 <ul>& ...
JavaScript函数详细介绍
一.函数介绍函数就是将实现特定功能的代码封装起来,当我们需要实现特定功能时,直接调用函数实现即可,不需要每次都写一堆代码,实现代码的复用. 函数的作用: 1.实现功能的封装,提高代码复用率 2.用于 ...
【JavaScript：语法】javascript函数定义以及常见用法
转载:javascript函数定义以及常见用法 javascript函数定义以及常见用法我们知道,js函数有多种写法,函数声明 ,函数表达式,Function式构造函数,自执行函数,包括Es6的箭头 ...

JavaScript 函数循环、延时、节流、防抖

函数循环(setInterval)

函数延时(setTimeout)

函数节流(throttle)

函数防抖(debounce)

JavaScript 函数循环、延时、节流、防抖相关推荐

最新文章

热门文章