zoukankan      html  css  js  c++  java
  • 处理繁重操作

    在一些动态的操作中,我们没有必要不间断地调用某函数去完成一些功能,比如在输入时统计字数,我们没有必要没输入一次变统计一次,而是可以隔一段时间去统计一次,又比如scroll滚动事件,如果我们只是需要知道滚动的距离,没有必要去实时的监听scroll事件,可以隔一段时间监听一次。

    在这里向大家介绍一个函数,可以解决这个问题。代码如下:

     1 // 返回一个函数,如果它被不间断地调用,它将不会得到执行。
     2 //该函数在停止调用 N 毫秒后,再次调用它才会得到执行。
     3 //如果有传递 ‘immediate’ 参数,会马上将函数安排到执行队列中,而不会延迟。
     4 function debounce(func, wait, immediate) {
     5     var timeout;
     6     return function() {
     7         var context = this, args = arguments;
     8         var later = function() {
     9             timeout = null;
    10             if (!immediate){
    11                 func.apply(context, args);
    12             } 
    13         }; 
    14         var callNow = immediate && !timeout;
    15         clearTimeout(timeout);
    16         timeout = setTimeout(later, wait);
    17         if (callNow) {
    18             func.apply(context, args);
    19         }
    20     };
    21 };
    22 // 用法
    23 var myEfficientFn = debounce(function() {
    24 // 所有繁重的操作
    25    console.log(123);
    26 }, 250);
    27 
    28 window.addEventListener('scroll', myEfficientFn);
    其中,myEfficientFn函数里写监听scroll的函数
  • 相关阅读:
    sql 语句总结
    linux 操作命令
    elk 相关问题总结
    windows 下命令总结
    spring 生态的区别
    电脑基本常识 cpu的认识
    git 命令总结
    reques 和session
    linux centos7 安装docker
    get和post请求
  • 原文地址:https://www.cnblogs.com/WeiRuifeng/p/4733786.html
Copyright © 2011-2022 走看看