javascript - 如何使用下划线 throttle 进行滚动？

Question

我试图为我的 div 滚动使用下划线库节流函数。

演示:https://jsfiddle.net/arunslb123/ffxhn0xg/

单击左右箭头可滚动 div。

我的代码:

$("#lft-arrow").click(function () {
 var leftPos = $('#numWrap').scrollLeft();
 $("#numWrap").stop().animate({scrollLeft: leftPos - 200}, 800);
});

$("#rgt-arrow").click(function () {
 var leftPos = $('#numWrap').scrollLeft();
 $("#numWrap").stop().animate({scrollLeft: leftPos + 200}, 800);
});

我的 throttle 代码:

function leftArrow(){
 var leftPos = $('#numWrap').scrollLeft();
 $("#numWrap").stop().animate({scrollLeft: leftPos - 200}, 800);
}

function rightArrow(){
 var leftPos = $('#numWrap').scrollLeft();
 $("#numWrap").stop().animate({scrollLeft: leftPos + 200}, 800);
}


var throttledLeft = _.throttle(leftArrow, 100);
var throttledRight=_.throttle(rightArrow,100);



$("#lft-arrow").click(function () {
 $("#numWrap").scroll(throttledLeft);
});

$("#rgt-arrow").click(function () {
 $("#numWrap").scroll(throttledRight);
});

这里如何使用_throttle？

Answer 1

回答我自己的问题。

问题是 throttle 函数的等待时间应该大于 animate 函数。

这是我更新的代码:

var leftArrow=function(){
 var leftPos = $('#numWrap').scrollLeft();
 $("#numWrap").animate({scrollLeft: leftPos - 200}, 800);
}

var  rightArrow=function(){
 var leftPos = $('#numWrap').scrollLeft();
 $("#numWrap").animate({scrollLeft: leftPos + 200}, 800);
}

$("#lft-arrow").click(_.throttle(leftArrow,1000));
$("#rgt-arrow").click(_.throttle(rightArrow,1000));