执行一次后停止执行函数 Javascript
Stop executing function after one time Javascript
我正在 JavaScript 中的一些计数器上工作,我遇到了一个需要分隔符的大数字的问题。所以我重写了 JavaScript 的一部分,只是为了需要分隔符的计数器。我创建了一个单独的函数来创建分隔符。我还构建了计数器应该从滚动页面偏移量开始。这是我的完整 JavaScript 代码:
<script type="text/javascript">
jQuery(document).ready(function ($) {
var element_position = $("#projecten-in-beeld").offset().top;
$(window).on("scroll", function () {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = element_position;
if (y_scroll_pos > scroll_pos_test) {
$(".fact-inhoud").each(function () {
var $this = $(this),
countTo = $this.attr("data-count");
$({ countNum: $this.text() }).animate(
{
countNum: countTo,
},
{
duration: 3000,
easing: "linear",
step: function () {
$this.text(Math.floor(this.countNum));
},
complete: function () {
$this.text(this.countNum);
//alert('finished');
},
}
);
}); // end data-count
$(".fact-inhoud2").each(function () {
var $this = $(this),
countTo = $this.attr("data-count2");
$({ countNum: $this.text() }).animate(
{
countNum: countTo,
},
{
duration: 5000,
easing: "linear",
step: function () {
$this.text(commaSeparateNumber(Math.floor(this.countNum)));
},
complete: function () {
$this.text(commaSeparateNumber(this.countNum));
//alert('finished');
},
}
);
}); // end data-count
}
});
});
function commaSeparateNumber(val) {
while (/(\d+)(\d{3})/.test(val.toString())) {
val = val.toString().replace(/(\d+)(\d{3})/, "" + "." + "");
}
return val;
}
</script>
它工作得很好,当我在计数器所在的 DIV 时,计数器开始 运行。当我在柜台上滚动得更远时,它们会停止并在停止的地方继续计数。当我滚动时,只有使用分隔符 'commaSeparateNumber' 函数的新计数器从零开始。
我怎么能因为某种原因终止这个只执行一次而不是每次我再次滚动时执行的函数?
您可以使用布尔标志获得类似的结果:
<script type="text/javascript">
jQuery(document).ready(function ($) {
var isExecuted = false;
var element_position = $("#projecten-in-beeld").offset().top;
$(window).on("scroll", function () {
if (!isExecuted) {
// Your code
isExecuted = true;
}
}
}
</script>
我正在 JavaScript 中的一些计数器上工作,我遇到了一个需要分隔符的大数字的问题。所以我重写了 JavaScript 的一部分,只是为了需要分隔符的计数器。我创建了一个单独的函数来创建分隔符。我还构建了计数器应该从滚动页面偏移量开始。这是我的完整 JavaScript 代码:
<script type="text/javascript">
jQuery(document).ready(function ($) {
var element_position = $("#projecten-in-beeld").offset().top;
$(window).on("scroll", function () {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = element_position;
if (y_scroll_pos > scroll_pos_test) {
$(".fact-inhoud").each(function () {
var $this = $(this),
countTo = $this.attr("data-count");
$({ countNum: $this.text() }).animate(
{
countNum: countTo,
},
{
duration: 3000,
easing: "linear",
step: function () {
$this.text(Math.floor(this.countNum));
},
complete: function () {
$this.text(this.countNum);
//alert('finished');
},
}
);
}); // end data-count
$(".fact-inhoud2").each(function () {
var $this = $(this),
countTo = $this.attr("data-count2");
$({ countNum: $this.text() }).animate(
{
countNum: countTo,
},
{
duration: 5000,
easing: "linear",
step: function () {
$this.text(commaSeparateNumber(Math.floor(this.countNum)));
},
complete: function () {
$this.text(commaSeparateNumber(this.countNum));
//alert('finished');
},
}
);
}); // end data-count
}
});
});
function commaSeparateNumber(val) {
while (/(\d+)(\d{3})/.test(val.toString())) {
val = val.toString().replace(/(\d+)(\d{3})/, "" + "." + "");
}
return val;
}
</script>
它工作得很好,当我在计数器所在的 DIV 时,计数器开始 运行。当我在柜台上滚动得更远时,它们会停止并在停止的地方继续计数。当我滚动时,只有使用分隔符 'commaSeparateNumber' 函数的新计数器从零开始。
我怎么能因为某种原因终止这个只执行一次而不是每次我再次滚动时执行的函数?
您可以使用布尔标志获得类似的结果:
<script type="text/javascript">
jQuery(document).ready(function ($) {
var isExecuted = false;
var element_position = $("#projecten-in-beeld").offset().top;
$(window).on("scroll", function () {
if (!isExecuted) {
// Your code
isExecuted = true;
}
}
}
</script>