首页 / VUE / Javascript的防抖和节流、VUE的防抖和节流

Javascript的防抖和节流、VUE的防抖和节流

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Javascript的防抖和节流、VUE的防抖和节流，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4183字，纯文字阅读大概需要6分钟。

内容图文

js原生

函数防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

 

函数防抖

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下面这段代码，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。

一个防抖的例子

<!DOCTYPE html> <html lang="en"> 　　<head> 　　　　<meta charset="UTF-8"> 　　　　<title>Title</title> 　　　　<style> 　　　　　　body{ 　　　　　　　　height: 5000px; 　　　　　　} 　　　　</style> 　　</head> 　　<body> 　　　　<script> 　　　　　　//防抖函数、fn（处理函数），wait（自定义定时器时间） 　　　　　　function debounce(fn, wait) {? 　　　　　　　　var timeout = ""; //声明变量timeout复制为空字符串 　　　　　　　　return function() {//返回匿名函数 　　　　　　　　　　if(timeout !== ""){//如果timeout不为空 　　　　　　　　　　　　clearTimeout(timeout);//清除timeout定时器 　　　　　　　　　　} 　　　　　　　　　　timeout = setTimeout(fn, wait);//重新给timeout赋值为fn我处理函数，wait为定时周期的一次性定时器 　　　　　　　　} 　　　　　　} 　　　　　　// 处理函数 　　　　　　function handle() { 　　　　　　　　console.log(Math.random()); 　　　　　　} 　　　　　　// 滚动事件 　　　　　　window.addEventListener('scroll', debounce(handle, 1000));//为window的scroll滑动事件绑定防抖函数 　　　　</script> 　　</body> </html>

代码执行路线是：

  • 1、页面初始化，渲染页面，执行代码
  • 2、调用debounce函数，声明一个变量timeout，并赋值为空字符串。返回一个匿名函数，通过addEventListener绑定给window的scroll（滑动事件）
  • 3、触发window的scroll（滑动事件）
  • 4、进入window的scroll的处理函数（调用debounce函数返回的那个匿名函数）。
  • 5.1、如果timeout不为空，清除timeout定时器，重新给timeout赋值为fn我处理函数，wait为定时周期的一次性定时器。
  • 5.2、如果timeout为空，重新给timeout赋值为fn我处理函数，wait为定时周期的一次性定时器。
  • 6、再次触发window的scroll（滑动事件），重复步骤4和步骤5
  • 7、停止触发，执行一遍步骤4和步骤5
  • 8、执行timeout一次性定时器，调用handle函数进行处理

 

函数节流------》时间戳

 

var throttle = function(func, delay) {

　　var prev = Date.now(); //生成初始时间

　　return function() {

　　　　var context = this; //存储当前this指向---可删除

　　　　var args = arguments; //存储当前局部变量---可删除

　　　　var now = Date.now(); //存储当前执行时间

　　　　if (now - prev >= delay) { //使用当前执行时间减去初始时间

　　　　　　func.apply(context, args); //通过apply使用当前对象调用func函数------如果想删除var context = this;var args = arguments;需要把当前代码改成func()

　　　　　　prev = Date.now(); //再次刷新初始时间

　　　　}

　　}

}

function handle() {

　　console.log(Math.random());

}

window.addEventListener('scroll', throttle(handle, 1000));

时间戳的一个优点：在页面初始化的时候就生成了“初始时间”（不明白初始时间上面有提示），而此时还没有触发scroll时间，等触发时远远超过了时间间隔（假设时间间隔为1秒），所以处理函数会立即执行

时间戳的一个缺点：假设触发事件的间隔是一秒，在距离上一次触发事件的时间还差0.5秒停止触发事件，那一秒过后事件函数也不会执行；

函数节流------》定时器

var throttle = function(func, delay) { 　　var timer = ""; 　　return function() { 　　　　var context = this; 　　　　var args = arguments; 　　　　if (!timer) { 　　　　　　timer = setTimeout(function() { 　　　　　　　　func.apply(context, args); 　　　　　　　　timer = ""; 　　　　　　}, delay); 　　　　} 　　} } function handle() { 　　console.log(Math.random()); } window.addEventListener('scroll', throttle(handle, 1000)); ? 定时器的优缺点与时间戳相反，当时发事件后1秒钟，执行处理函数，在事件间隔内出发时间，等超过时间间隔会再次执行处理函数 ?

函数节流------》定时器+时间戳

? 所以我们就把事件戳的有点和定时器的有点结合起来，变成下面的方案 var throttle = function(func, delay) { 　　var timer = ""; 　　var startTime = Date.now(); 　　return function() { 　　　　var curTime = Date.now(); 　　　　var remaining = delay - (curTime - startTime); 　　　　var context = this; 　　　　var args = arguments; 　　　　clearTimeout(timer); 　　　　if (remaining <= 0) { 　　　　　　func.apply(context, args); 　　　　　　startTime = Date.now(); 　　　　} else { 　　　　　　timer = setTimeout(func, remaining); 　　　　} 　　} } function handle() { 　　console.log(Math.random()); } window.addEventListener('scroll', throttle(handle, 1000)); ? 希望能看懂。。。。。。嘿嘿

 

参考文章：https://blog.csdn.net/qq_41000891/article/details/82733532


未完待续。。。。。。

 

内容总结

以上是互联网集市为您收集整理的Javascript的防抖和节流、VUE的防抖和节流全部内容，希望文章能够帮你解决Javascript的防抖和节流、VUE的防抖和节流所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/837904.html

来源：【匿名】