同期javascriptプロセスからのUIの範囲入力の解除

Question

処理集中型（ほぼ同期的）JavaScript関数の値を設定するhtml5入力範囲要素があります。

更新された値は、一定の間隔で入力コントロール上にマウスを置いて関数に渡されなければなりません。スライダが安定したとき（変更時）に値を更新する回避策はオプションではありません。

スライダーがUIで遅れないように、私はinput range要素から読み取った内部値にsetIntervalを設定して、500ミリ秒ごとに新しい値でjavascript関数を更新しようとしています。

$("#slider").on("change", function(){ 
 
    setInterval(function(){ 
 
    //Calculate intensive function with value from #slider 
 
    },500); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="range" id="slider">

それがUIをフリーズするので、上記のコードは動作しません。私は、マルチスレッドよりも簡単な方法があると確信していますが、私はこれを回避することはできません。

Answer 1

私は私が最初に尋ねたが、私はちょうどこの古い記事につまずいたと私の解決策を共有したいと思ったとき、私の質問が明確ではなかったと思います。私が探していた何

は、すべてのコールバックを実行するカスタムスロットル機能でしたnミリ秒。ここで私はそれをやった：

throttle(function() { 
     // calculation goes here... 
     console.log('I only fire every 250 ms!'); 
     }, 250)(); 

function throttle(fn, throttleTime, scope) { 
      throttleTime = throttleTime || 250; 
      var last, 
       deferTimer; 
      return function() { 
       var context = scope || this; 
       var now = +new Date(), 
        args = arguments; 
       if (last && now < last + throttleTime) { 
        // hold on to it 
        clearTimeout(deferTimer); 
        deferTimer = setTimeout(function() { 
         last = now; 
         fn.apply(context, args); 
        }, throttleTime); 
       } else { 
        last = now; 
        fn.apply(context, args); 
       } 
      }; 
     }