Question

注意：我需要使用纯JavaScript来实现这一点，我知道jquery中有一个.one()方法来做到这一点，但是我需要在纯javascript中得到相同的输出。

场景：：当用户滚动并到达页面的3/4部分或更多部分时，我试图调用一个函数，但是当用户到达该部分时，问题就会出现，我们都知道它们不能做到像素完美，因此，在满足条件后，该功能将按像素滚动执行。

我希望仅在满足条件后才执行，然后在页面底部添加一个部分，然后用户应再次到达底部，并且功能应仅执行一次，依此类推...

>

代码段：

var colors = ['skyblue', 'powderblue', 'lightgreen', 'indigo', 'coral'];

var addPage = function() {
  var page = document.createElement('div');
  page.classList.add('page');
  page.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  document.body.append(page);
  console.log('added a new page');
}

var scrollAndAdd = function() {
  if (window.scrollY < (window.innerHeight * (3 / 4))) {
    // execute addPage only once for each attempt; it's creating infinite pages
    addPage();
  }
}

window.addEventListener('scroll', scrollAndAdd);

* {
  margin: 0;
  padding: 0;
}

.page {
  height: 100vh;
}

<div class='page' style='background-color: lightgreen'></div>
<div class='page' style='background-color: skyblue'></div>

Answer 1

您实际上并不需要逻辑来一次运行该函数。而是使用其他表达式来确定是否添加页面。添加页面后，在完成更多滚动之前，相同的表达式将不再为true。

注意：我也改变了随机选择逻辑。

var colors = ['powderblue', 'lightgreen', 'indigo', 'coral', 'skyblue'];

var addPage = function() {
  var page = document.createElement('div');
  page.classList.add('page');
  // Make sure the same color is not selected twice in sequence:
  var colorIndex = Math.floor(Math.random() * (colors.length-1));
  var color = colors.splice(colorIndex,1)[0];
  colors.push(color);
  page.style.backgroundColor = color;
  document.body.append(page);
}

var scrollAndAdd = function() {
  if (window.scrollY > document.body.clientHeight - window.innerHeight - 10) {
    addPage();
  }
}
window.addEventListener('scroll', scrollAndAdd);

* {
  margin: 0;
  padding: 0;
}

.page {
  height: 100vh;
}

<div class='page' style='background-color: lightgreen'></div>
<div class='page' style='background-color: skyblue'></div>

Answer 2

我希望它能为您提供帮助：

var colors = ['skyblue', 'powderblue', 'lightgreen', 'indigo', 'coral'];

var addPage = function() {
  var page = document.createElement('div');
  page.classList.add('page');
  page.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  document.body.append(page);
  console.log('added a new page');
}

var scrollAndAdd = function() {
  var a = document.body.clientHeight - window.innerHeight * (5 / 4)
  if (window.scrollY > a) {
    addPage();
  }
}

window.addEventListener('scroll', scrollAndAdd);

* {
  margin: 0;
  padding: 0;
}

.page {
  height: 100vh;
}

<div class='page' style='background-color: lightgreen'></div>
<div class='page' style='background-color: skyblue'></div>

Answer 3

那么如何用本地标志来咖喱呢？

var colors = ['skyblue', 'powderblue', 'lightgreen', 'indigo', 'coral'];


const localCurry = function(func, immediateAction) {
  var flag;
  return  function() {
    var context = this, args = arguments;
    var callNow = immediateAction && !flag;
    flag = true;
    if (callNow) func.apply(context, args);
  }
}


var addPage = localCurry(function() {
  var page = document.createElement('div');
  page.classList.add('page');
  page.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
  document.body.append(page);
  console.log('added a new page');
}, true);

var scrollAndAdd = function() {
  var a = document.body.clientHeight - window.innerHeight * (5 / 4)
  if (window.scrollY > a) {
    addPage();
  }
}

window.addEventListener('scroll', scrollAndAdd);

现在，您确实可以根据计时器或自定义逻辑来重置标志。

如何仅首次调用函数-JavaScript

3 个答案: