In js, it is judged that an element stays in the visual area for more than 2 seconds before executing the corresponding function, otherwise what if it is not executed?

the element in the scroll bar event stays in the visual area for more than 2 seconds before the corresponding function is executed, otherwise it will not be executed

Javascript
Feb.28,2021

learn to resist shaking 

//  
  //  
  function isInSight2(ele) {
      var visibleArea = document.documentElement.clientHeight;//
      var eleTop = ele.offsetTop;//
      var scrollTop = document.documentElement.scrollTop;// 
      return eleTop - scrollTop < visibleArea ? true : false
  }
  //  https://segmentfault.com/a/1190000010744417
  function isInSight(el) {
      const bound = el.getBoundingClientRect(); // 
      const clientHeight = window.innerHeight;// 
      //
      //const clientWidth=window.innerWeight;
      return bound.top <= clientHeight + 100;
  }

it is estimated that you need a sign and a timer for 2 seconds. Combined with the above elements in the visual area, the general logic is:

  1. element enters the visualization, triggers the action, sets the flag amount, and starts the timer (note that the timer needs to be stored in variables for later deletion)
    2. The
  2. element exits the visual area, triggers the action, detects whether the start timer variable is null, deletes the timer if not, sets the variable to null, if it is null, does not act (may have performed the action after 2 seconds previously), and sets the flag status
  3. timer is triggered after 2 seconds. Check the amount of flag set, set the timer variable to null, for corresponding processing, and delete the timer at the end

Previous: How do angular2 master modules and submodules share components?

Next: In the React project, I want to be able to use div and canvas tags in {}, but this is not valid now

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu