javascript - 如何使用交替 if 语句创建可重用函数

Question

我正在创建平滑滚动和弹跳(在顶部和底部)效果。 (经过一整天的反复试验，)我能够成功实现它。我现在很难找到一种方法来获得可重用的干净代码。 (我认为这叫做算法？)

我遇到的具体问题是在 <= 之间交替和 >= .整体代码可以使用一些清理，我已尽我所能，但我认为它需要更多(如果不需要请告诉我)。

因此可重复使用 function ，像这样:

function reusableFunction() {
    ...
    if (num1 >= num2) // One case I have to compare like this
    if (num1 <= num2) // Another case, I have to compare like this
    ...
}

我卡在了 function bounceBack 的第 86 行.如果您有更好的方法来制作平滑的滚动和弹跳效果，请作为答案发布。我不想使用任何库或其他框架(如 JQuery)。

JSFiddle

console.clear();

var innerWrapper = document.getElementById('innerWrapper');
innerWrapper.addEventListener('mousewheel', handleScroll);
innerWrapper.style.transform = 'translate3d(0px, 0px, 0px)';

var interval, // scroll is being eased
  mult = 0, // how fast do we scroll
  dir = 0, // 1 = scroll down, -1 = scroll up
  steps = 50, // how many steps in animation
  length = 30; // how long to animate

var bouncePadding = 30;

function handleScroll(e) {
  e.preventDefault();
  clearInterval(interval); // cancel previous animation
  ++mult; // we are going to scroll faster
  var delta = -Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
  if (dir != delta) { // scroll direction changed
    mult = 1; // start slowly
    dir = delta;
  }
  var start = parseInt(innerWrapper.style.transform.split(',')[1], 10); // Get x from translate3d
  var end = start + length * mult * delta; // where to end the scroll
  var change = end - start; // base change in one step
  var step = 0; // current step
  var scrolledToBottom = innerWrapper.scrollHeight - innerWrapper.parentElement.offsetHeight;
  var tempVar;

  interval = setInterval(function() {
    var scrollPosition = easeOut(step++, start, -change, steps);
    scrollPosition = clamp(scrollPosition, -scrolledToBottom - bouncePadding, 0 + bouncePadding);
    innerWrapper.style.transform = 'translate3d(0px, ' + scrollPosition + 'px, 0px)';
    if (tempVar === scrollPosition) {
      step = steps;
    } else {
      tempVar = scrollPosition
    }

    if (step >= steps) { // scroll finished without speed up - stop by easing out
      endScrollCallback();

      if (scrollPosition > 0 && dir === -1) {
        step = 0;
        var myInterval = setInterval(function() {
          var scrollPos = easeOut(step++, scrollPosition, -scrollPosition, 15);
          innerWrapper.style.transform = 'translate3d(0px, ' + (scrollPos) + 'px, 0px)';

          if (scrollPos <= 0) {
            clearInterval(myInterval);
            innerWrapper.style.transform = 'translate3d(0px, ' + (0) + 'px, 0px)';
          }
        }, 10);
      } else if (scrollPosition < -scrolledToBottom && dir === 1) {
        step = 0;
        var myInterval = setInterval(function() {
          var change = -scrolledToBottom - scrollPosition;
          var scrollPos = easeOut(step++, scrollPosition, change, 15);
          innerWrapper.style.transform = 'translate3d(0px, ' + (scrollPos) + 'px, 0px)';

          if (scrollPos >= -scrolledToBottom) {
            clearInterval(myInterval);
            innerWrapper.style.transform = 'translate3d(0px, ' + (-scrolledToBottom) + 'px, 0px)';
          }
        }, 10);
      }
    }
  }, 10);
}

function easeOut(t, b, c, d) {
  t /= d;
  return -c * t * (t - 2) + b;
}

function endScrollCallback() {
  mult = 0;
  clearInterval(interval);
}

function bounceBack(from, to, difference) {
  var step = 0;
  var interval = setInterval(function() {
    var scrollPos = outQuartic(step++, from, difference, 15);
    innerWrapper.style.transform = 'translate3d(0px, ' + (scrollPos) + 'px, 0px)';
    if (scrollPos <= 0) { /* Got stuck here */
      clearInterval(interval);
      innerWrapper.style.transform = 'translate3d(0px, ' + to + 'px, 0px)';
    }
  }, 10);
}

function clamp(val, min, max) {
  if (typeof min !== 'number') min = 0;
  if (typeof max !== 'number') max = 1;
  return Math.min(Math.max(val, min), max);
}

body {} #outerWrapper {
  width: 500px;
  height: 400px;
  overflow: hidden;
  background-color: black;
}
#content {
  background-image: url("http://images.freeimages.com/images/premium/previews/3037/30376024-beautiful-flower-portrait.jpg");
}

<div id="outerWrapper">
  <div id="innerWrapper">
    <div id="content">
      Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero
      sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus
      Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus
      enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar
      justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames
      ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque
      Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem
      lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie
      vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum
      vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque
      Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci
      Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla.
      Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet
      consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet
      risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat
      Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor
      dolor
    </div>
  </div>
</div>

Answer 1

一般是自定义一个功能，也就是什么<=是，一个人可以使用一个功能。如果您想自定义一个声明，例如:

if (a <someFunction> b){
  // ...
}

哪里someFunction在你的情况下可以是 <=或 > ，一种方法可以是:

function f(a,b,conditionsMet){
  return conditionsMet ? a <= b : a > b;
}

然后调用它:

if ( f(a,b,are conditions met?) ){
  // ...
}

(不确定是不是你的意思，欢迎评论..)